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实现的网页局布刷新效果
Dec 01 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
JS定时关闭窗口的实例
May 22 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
js html实现计算器功能
Nov 13 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
小程序使用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实现链结人气统计
2006/10/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
vue实现搜索功能
2019/05/28 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python读取stdin方法实例
2019/05/24 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
煤矿班组长的职责
2013/12/25 职场文书
挂职思想汇报
2013/12/31 职场文书
安全责任书范文
2014/03/12 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Golang二维数组的使用方式
2021/05/28 Golang
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android