layui问题之模拟table表格中的选中按钮选中事件的方法


Posted in Javascript onSeptember 20, 2019

一、问题

不操作页面,实现table表格中的checkbox选中功能

二、经过

刚开始的思路:

1、通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view

2、由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed

3、紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:这个input的类型就是checkbox)

4、找到input的下一个兄弟节点,即div.layui-form-checked

layui.use(['table', 'form', 'layer', 'layedit', 'laydate'], function() {
  // code

  //模拟checkbox选中功能
  var checkbox = $('#employeesTable').next().find('.layui-table-fixed tr[data-index="0"] td input');
  checkbox.next().click();
});

结果可想而知,并没有实现。在console中打印出来,找不到.layui-table-fixed,只能找到table里面的<tbody></tbody>,而且里面没有子节点。

三、结果

想一下,大概是table渲染数据时,模拟checkbox选中功能已经开始执行了。更这段code加一个延迟,这个问题解决。

setTimeout(function () {
  var td = $('#employeesTable').next().find('.layui-table-fixed tr[data-index="0"] td input');
  td.next().click();
},3000);

PS:后台在写测试,需要操作页面dom,用到了这种模拟事件。

以上这篇layui问题之模拟table表格中的选中按钮选中事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
深入理解Node内建模块和对象
Mar 12 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 #Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 #Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 #Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 #Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 #Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 #Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 #Javascript
You might like
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
angularJS模态框$modal实例代码
2017/05/27 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
有关Python的22个编程技巧
2018/08/29 Python
Python字节单位转换实例
2019/12/05 Python
python简单的三元一次方程求解实例
2020/04/02 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
什么是.net
2015/08/03 面试题
试用期自我鉴定范文
2014/03/20 职场文书
超市创业计划书
2014/04/24 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
网聊搭讪开场白
2015/05/28 职场文书
小学主题班会教案
2015/08/17 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python内置数据结构列表与元组示例详解
2021/08/04 Python