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 Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
jQuery事件对象总结
Oct 17 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
js实现碰撞检测
Jan 29 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根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js 走马灯简单实例
2013/11/21 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
python如何修改装饰器中参数
2018/03/20 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
python 实现控制鼠标键盘
2020/11/27 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
户籍证明模板
2014/09/28 职场文书
党员示范岗材料
2014/12/19 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
php去除deprecated的实例方法
2021/11/17 PHP
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js