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 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
javascript回调函数详解
Feb 06 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
Vue实现小购物车功能
Dec 21 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 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
上海中网科技笔试题
2012/02/19 面试题
承诺书模板
2014/08/30 职场文书
会议邀请函
2015/01/30 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
小学班主任工作随笔
2015/08/15 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python