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对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JS实现微信摇一摇原理解析
Jul 22 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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
dedecms集成财付通支付接口
2014/12/28 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Python 合并拼接字符串的方法
2020/07/28 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
新教师培训方案
2014/06/08 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
《1942》观后感
2015/06/08 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python