JQuery实现动态表格(添加、删除、遍历)

您所在的位置:网站首页 jquery循环创建元素 JQuery实现动态表格(添加、删除、遍历)

JQuery实现动态表格(添加、删除、遍历)

2024-07-14 17:28| 来源: 网络整理| 查看: 265

遍历表格逻辑

1.浏览器会自动把所有行tr使用tbody标签包裹起来

2.使用childern()获取当前元素的所有儿子标签

3.table表格需要两个childern才能获取到所有tr行,若一个childern只能获取到tbody,即$("#myTable").childern().childern()

4.遍历每行,每行元素trObject调用childern()获取每行的所有单元格(列)集合,时刻将js对象转成jq对象。

5.遍历每个单元格,使用Htm()获取每个单元格内容存入字符串变量str中

添加表格一条记录逻辑

1.给添加按钮绑定点击事件

2.点击按钮后,获取table元素的tbody元素,给table表格的tbody中append内部末尾追加一个行元素

3.注意,由于表格自动生成tbody,不能直接获取table表格append一个tr,这样也能追加,但追加的tr在tbody外。

删除表格一条记录逻辑

1.此种绑定事件的方式对动态添加的元素不生效

即通过 元素.click(function(){})绑定事件方式是无法绑定动态生成的任何元素的,因为这种方式是在页面加载完成后就当前页面所选中的元素进行绑定,后续动态添加且符合被选中的元素是不会被绑定,这就需要使用另一种事件绑定方式$(document).on(事件名称,要选中的元素,匿名函数)即整个文档准备完毕后再进行绑定事件。

2.使用下面这种绑定事件方式进行记录的删除,this表示当前触发的按钮

3.点击删除按钮,触发绑定的事件,获取当前元素的父级td的父级tr元素,即删除该按钮所在的行

动态表格 td, th { padding: 10px; } $(function() { /*给遍历表格按钮绑定点击事件*/ $("#blBtn").click(function() { var tab = $("#myTable"); //获取到了表格的jQuery对象 //获取表格的所有行 //tab.children()获取的是表格tbody, //表格默认把所有tr行用tbody包裹,使用两次childer即可 var trArr=tab.children().children(); //遍历行 for(var i=0;i


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3