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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
JavaScript的Function详细
Nov 14 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
微信小程序实现的五星评价功能示例
Apr 25 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实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python 函数返回值的示例代码
2019/03/11 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
学习委员自我鉴定
2014/01/13 职场文书
研究生求职自荐书
2014/06/23 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
入党申请书怎么写?
2019/06/11 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python pandas之求和运算和非空值个数统计
2021/08/07 Python