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 相关文章推荐
了解一点js的Eval函数
Jul 26 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
Augularjs-起步详解
2016/07/08 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
js实现简单的打印表格
2020/01/15 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python和php哪个容易学
2020/06/19 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
促销活动总结范文
2014/04/30 职场文书
室内设计专业自荐信
2014/05/31 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫