jQuery实现table表格行的添加和删除代码示例

  • 内容
  • 评论
  • 相关

本文实现了使用jQuery添加和删除表格行的功能。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var jsonArr =[],我现有的数据。

(2).function loadData() {},此方法可以实现加载数据的功能。

(3).var $th = "<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>性别</th><th>操作</th></tr>",一个html字符串。

(4).$("#tbList").append($th),将其添加到表格。

(5).for (var index = 0; index < jsonArr.length; index++) {},使用for循环对数组中的数据进行遍历。

(6).var $tr = $("<tr><td>" + jsonArr[index].id + "</td><td>" +

jsonArr[index].name + "</td><td>" +

jsonArr[index].eamil + "</td><td>" +

jsonArr[index].gender + "</td><td></td></tr>");

创建一个tr行,并且将读取的数据填入对应的单元格。

(7).var $link = $("<a href='javascript:void(0)'>删除</a>"),创建一个删除链接。

(8).$link.click(function () {

$(this).parent().parent().remove();

}),为删除链接注册click事件处理函数。

删除当前链接的父元素的父元素,也就是将所在的tr行删除。

(9).$("td:last", $tr).append($link),将连接添加到当前tr行的最后一个单元格。

(10).$("#tbList").append($tr),将tr行添加到table。

本文案例为大家展示了《jQuery实现table表格行的添加和删除代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。



注意:如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery实现table表格行的添加和删除代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注