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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
JS中表单的使用小结
Jan 11 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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路由类
2016/05/29 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
javascript 上下banner替换具体实现
2013/11/14 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
EasyUI创建人员树的实例代码
2017/09/15 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
详解Python中dict与set的使用
2015/08/10 Python
使用Python来开发微信功能
2018/06/13 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python实现的特征提取操作示例
2018/12/03 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
销售自荐信
2013/10/22 职场文书
应届生服务员求职信
2013/10/31 职场文书
高一地理教学反思
2014/01/18 职场文书
校本教研工作制度
2014/01/22 职场文书
整改落实自查报告
2014/11/05 职场文书
2014年财务科工作总结
2014/11/11 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
学生犯错保证书
2015/05/09 职场文书
刑事上诉状范文
2015/05/22 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技