jQuery table表格行的新增和刪除

antzone發表於2018-08-04
jQuery

本章節分享一段程式碼例項，它實現了使用jQuery新增和刪除表格行的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</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": "123@126.com", "gender": "男" },
 { "id": 2, "name": "2劉德華", "eamil": "123@126.com", "gender": "女" },
 { "id": 3, "name": "3劉德華", "eamil": "133@126.com", "gender": "女" },
 { "id": 4, "name": "4郭富城", "eamil": "113@126.com", "gender": "女" },
 { "id": 5, "name": "5張學友", "eamil": "223@126.com", "gender": "男" },
 { "id": 6, "name": "6孫紅雷", "eamil": "423@126.com", "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>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（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。

二.相關閱讀:

（1）.parent()方法參閱jQuery parent()方法一章節。

（2）.remove()方法參閱jQuery remove()方法一章節。

（3）.append()方法參閱jQuery append()方法一章節。

相關文章