iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >layui如何模拟table表格中的选中按钮选中事件
  • 453
分享到

layui如何模拟table表格中的选中按钮选中事件

2024-04-02 19:04:59 453人浏览 安东尼
摘要

这篇文章给大家分享的是有关layui如何模拟table表格中的选中按钮选中事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、问题不操作页面,实现table表格中的checkb

这篇文章给大家分享的是有关layui如何模拟table表格中的选中按钮选中事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、问题

不操作页面,实现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表格中的选中按钮选中事件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: layui如何模拟table表格中的选中按钮选中事件

本文链接: https://www.lsjlt.com/news/78847.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • layui如何模拟table表格中的选中按钮选中事件
    这篇文章给大家分享的是有关layui如何模拟table表格中的选中按钮选中事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、问题不操作页面,实现table表格中的checkb...
    99+
    2024-04-02
  • JAVA表格中如何加入选择按钮
    要在Java表格中加入选择按钮,首先需要创建一个列模型(ColumnModel)来管理列属性。然后,在列模型中创建一个列(Colum...
    99+
    2023-08-12
    JAVA
  • layui数据表格中如何实现点击分页按钮和监听事件
    这篇文章给大家分享的是有关layui数据表格中如何实现点击分页按钮和监听事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。先上图代码.html<div>  ...
    99+
    2024-04-02
  • html单选按钮默认选中如何做
    本文小编为大家详细介绍“html单选按钮默认选中如何做”,内容详细,步骤清晰,细节处理妥当,希望这篇“html单选按钮默认选中如何做”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。...
    99+
    2024-04-02
  • Vue中Element的table多选表格如何实现单选
    目录Element的table多选表格实现单选vue table单选逻辑Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2...
    99+
    2024-04-02
  • vue单选按钮,选中如何改变其当前按钮颜色
    目录vue单选按钮,选中改变其当前按钮颜色vue一组按钮的选中样式的设置定义一组按钮,添加点击事件定义一些变量实现点击事件css设置实现效果也可以用与其他组件vue单选按钮,选中改变...
    99+
    2024-04-02
  • layui中table表格上如何添加日期控件
    这篇文章主要介绍layui中table表格上如何添加日期控件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方法一:var tableInit = tab...
    99+
    2024-04-02
  • 如何在Dreamweaver中插入单选按钮
    本篇文章给大家分享的是有关如何在Dreamweaver中插入单选按钮,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。打开网页编辑软件并新建html编辑页面,通过在菜单栏中点击插入...
    99+
    2023-06-08
  • layui中如何实现表格分页和记录勾选
    这篇文章主要介绍了layui中如何实现表格分页和记录勾选,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。layui 分页之后没有记录之前勾选项...
    99+
    2024-04-02
  • 如何使用layui 选中表单元素
    今天就跟大家聊聊有关如何使用layui 选中表单元素,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。layui对表单元素都作了美化,比如下拉列表,单选...
    99+
    2024-04-02
  • layui中如何使用table插件进行复选框联动功能
    小编给大家分享一下layui中如何使用table插件进行复选框联动功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!实际项目功能...
    99+
    2024-04-02
  • jQuery如何获取单选按钮radio选中值与去除所有radio选中状态
    这篇文章将为大家详细讲解有关jQuery如何获取单选按钮radio选中值与去除所有radio选中状态,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如下所示:喜欢<i...
    99+
    2024-04-02
  • BootStrap中如何实现单选按钮水平排列
    这篇文章主要介绍了BootStrap中如何实现单选按钮水平排列,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.运行效果如图所示2.实现代码...
    99+
    2024-04-02
  • angularjs如何实现下拉列表的选中事件
    这篇文章主要介绍了angularjs如何实现下拉列表的选中事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。select标签的对于大家来说很...
    99+
    2024-04-02
  • jQuery如何监听复选框选中事件?
    这篇文章将为大家详细讲解有关jQuery如何监听复选框选中事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听复选框选中事件 jQuery提供了多种方式来监听复选框选中事件。具体使用哪种方...
    99+
    2024-04-02
  • layui如何清除radio的选中状态
    这篇文章主要介绍了layui如何清除radio的选中状态,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。出现一种情况在方案二中产生了默认勾选,...
    99+
    2024-04-02
  • 如何使用AngularJS编写多选按钮选中时触发指定方法
    小编给大家分享一下如何使用AngularJS编写多选按钮选中时触发指定方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!相应的代...
    99+
    2024-04-02
  • MYSQL中如何从表名有空格的表中选取数据?
    如果表名有空格,则需要在表名周围使用反引号。让我们首先创建一个表。 在这里,我们使用了反引号 -mysql> create table `Demo Table138` ( Id int NOT NULL AUTO_INCREME...
    99+
    2023-10-22
  • vue中如何模拟点击事件
    在vue中模拟点击事件的方法:1.新建vue.js项目;2.添加按钮,设置ref属性;3.添加@click属性绑定事件;4.使用this方法触发事件;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create pr...
    99+
    2024-04-02
  • jQuery如何监听复选框取消选中事件?
    这篇文章将为大家详细讲解有关jQuery如何监听复选框取消选中事件?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery监听复选框取消选中事件 jQuery 提供了多种方法来监听复选框取消选中事件。...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作