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 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
小程序使用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 正则学习实例
2008/07/30 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php操作MongoDB类实例
2015/06/17 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
化工厂员工工作总结
2015/10/15 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server