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 相关文章推荐
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JavaScript制作3D旋转相册
Aug 02 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
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
高三自我鉴定怎么写
2013/10/19 职场文书
行政经理岗位职责
2013/11/09 职场文书
求职自荐信格式
2013/12/04 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
党员服务承诺书
2014/05/28 职场文书
党员目标管理责任书
2014/07/25 职场文书
119消防日活动总结
2014/08/29 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库