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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
vue实现滑动解锁功能
Mar 03 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制作静态网站的模板框架(四)
2006/10/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python实现的Iou与Giou代码
2020/01/18 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Python读写锁实现实现代码解析
2020/11/28 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
一份创业计划书范文
2014/02/08 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
详解Node.js如何处理ES6模块
2021/05/15 Javascript
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Python中time标准库的使用教程
2022/04/13 Python