layui问题之模拟table表格中的选中按钮选中事件的方法
更新时间：2019年09月20日 11:09:52 作者：柒仔不安
今天小编就为大家分享一篇layui问题之模拟table表格中的选中按钮选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一、问题
不操作页面，实现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表格中的选中按钮选中事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JS逻辑运算符短路操作,结合实例形式分析了javascript三个逻辑运算符短路操作的原理与使用技巧,需要的朋友可以参考下2018-07-07
根据用户选择不同的下拉值，出现相应的文本输入框，在某些情况下比较实用，本文为大家写了个，有需求的朋友可以参考下2013-08-08
这篇文章主要为大家介绍了Echart可视化学习的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
JavaScript之appendChild、insertBefore和insertAfter使用说明
这几天需要用到对HTML节点元素的删/插操作，由于用到insertBefore方法的时候遇到了一些麻烦，现在作为知识的整理，分别对appendChild、insertBefore和insertAfter做个总结2010-12-12
这篇文章主要介绍了JS根据年月获得当月天数的实现代码,需要的朋友可以参考下2014-07-07
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象2011-05-05
js下将字符串当函数执行的方法，需要的朋友可以参考下。2011-07-07
在ECSHOP的目录/JS/common.js中有一个openSpeDiv方法是实现ECSHOP的弹窗效果的。接下来通过本文给大家分享使用openSpeDiv方法实现Ecshop登录弹窗框效果，需要的朋友参考下2017-03-03
这篇文章主要介绍了JS树形结构根据id获取父级节点元素,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JavaScript中数据结构与算法(三)：链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下2015-06-06
最新评论