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表格中的选中按钮选中事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
解决使用layui的时候form表单中的select等不能渲染的问题
今天小编就为大家分享一篇解决使用layui的时候form表单中的select等不能渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了基于 webpack2 实现的多入口项目脚手架的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
javascript每日必学之条件分支，本文的主要内容就是介绍的逻辑条件分支，循环，感兴趣的小伙伴们可以参考一下2016-02-02
云函数是部署在云端的函数，他和小程序本地的函数存在很大的区别。本文将通过示例详细为大家介绍如何在小程序开发中使用云函数，需要的可以参考一下2022-03-03
这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了JavaScript文档加载模式以及元素获取,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家详细介绍了JS实现元素上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在做项目的时候,前端需要在表格的底部做一个汇总的功能,在采用reduce对当前属性所有值汇总时,发现汇总结果存在好长的小数位,本文给大家介绍了如何解决前端JS小数运算精度问题,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了JavaScript正则表达式简单实用实例的相关资料,需要的朋友可以参考下2017-06-06
最新评论