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 相关文章推荐
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
小程序使用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合并两个数组的两种方式的异同
2012/09/14 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
超级退弹代码
2008/07/07 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python实现连连看游戏
2020/02/14 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
校园安全演讲稿
2014/05/09 职场文书
技校毕业生自荐信
2014/06/03 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书