• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

jQuery 程序员 2年前 (2019-01-16) 144次浏览 已收录 0个评论

本文实现了使用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表格行的添加和删除代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>jQuery实现table表格行的添加和删除代码示例-搞代码gaodaima.com</title> <style type=”text/css”> #tbList td,#tbList th{   border:1px solid #000;   padding:5px; } </style> <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script> <script type=”text/javascript”> var jsonArr =[  { “id”: 1, “name”: “1刘德华”, “eamil”: “[email protected]”, “gender”: “男” },  { “id”: 2, “name”: “2刘德华”, “eamil”: “[email protected]”, “gender”: “女” },  { “id”: 3, “name”: “3刘德华”, “eamil”: “[email protected]”, “gender”: “女” },  { “id”: 4, “name”: “4郭富城”, “eamil”: “[email protected]”, “gender”: “女” },  { “id”: 5, “name”: “5张学友”, “eamil”: “[email protected]”, “gender”: “男” },  { “id”: 6, “name”: “6孙红雷”, “eamil”: “[email protected]”, “gender”: “男” } ]; function loadData() {   var $th = “<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>性别</th><th>操作</th></tr>”;   $(“#tbList”).append($th);   for (var index = 0; index < jsonArr.length; index++) {     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>”);     var $link = $(“<a href=’javascript:void(0)’>删除</a>”);     $link.click(function () {       $(this).parent().parent().remove();     });     $(“td:last”, $tr).append($link);     $(“#tbList”).append($tr);   } } $(function () {   loadData();   $(“#btnAdd”).click(function () {     var id = $(“#txtID”).val();     var name = $(“#txtName”).val();     var email = $(“#txtEmail”).val();     var gender = $(“#txtGender”).val();     if((id == “”) || (name == “”) || (email == “”) || (gender == “”)){       alert(“请输入完整的信息”);       return;     }     var $tr = $(“<tr><td>” + id + “</td><td>” + name + “</td><td>” +         email + “</td><td>” +         gender + “</td><td></td></tr>”);     var $link = $(“<a href=’javascript:void(0)’>删除</a>”);     $link.click(function () {       $(this).parent().parent().remove();     });     $(“td:last”, $tr).append($link);     $(“#tbList”).append($tr);   }); });  </script> </head> <body> ID:<input type=”text” id=”txtID” /> 姓名:<input type=”text” id=”txtName” /> email:<input type=”text” id=”txtEmail” /> 性别:<input type=”text” id=”txtGender” /><br /> <input id=”btnAdd” type=”button” value=”添加” /> <br /> <table id=”tbList”></table> </body> </html>[/code]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址