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 localStorage实现本地缓存的方法
Jun 22 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JavaScript的继承实现小结
May 07 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
php流量统计功能的实现代码
2012/09/29 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php猜单词游戏
2015/09/29 PHP
一段实时更新的时间代码
2006/07/07 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
angularJS开发注意事项
2018/05/26 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
深入学习python的yield和generator
2016/03/10 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Django中的Signal代码详解
2018/02/05 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python爬虫可以爬什么
2020/06/16 Python
什么是事务?事务有哪些性质?
2012/03/11 面试题
大学生护理专业自荐信
2013/10/03 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
小学家长评语大全
2014/04/16 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
政风行风建设责任书
2014/07/23 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
中学教师教学工作总结
2015/08/13 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL