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.ajax 用户登录验证代码
Oct 29 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
JS实现的文件拖拽上传功能示例
May 21 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
js仿淘宝放大镜效果
Dec 28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
React中的Context应用场景分析
Jun 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
实用函数3
2007/11/08 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
实例解析php的数据类型
2018/10/24 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
分享ES6的7个实用技巧
2018/01/18 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
对python制作自己的数据集实例讲解
2018/12/12 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Django中URL的参数传递的实现
2019/08/04 Python
python数据化运营的重要意义
2019/11/25 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
自荐信怎么写好
2013/11/11 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
入职担保书范文
2014/05/21 职场文书
验房委托书
2014/08/30 职场文书
加强作风建设心得体会
2014/10/22 职场文书
团结主题班会
2015/08/13 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android