jQuery動態新增和刪除表格行

antzone發表於2018-06-04
jQuery

在實際應用中，可能會根據需要動態的新增或者刪除行，下面就通過程式碼例項詳細介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#addOneRow").click(function(){ 
    var tempTr=$("tr:first").clone(true); 
    $("tr:last").after(tempTr); 
    $("tr:last > td > #name").val("");
    $("tr:last > td > #address").val("");
  }); 
  $(".delOneRow").click(function() { 
    if ($("tr").length < 2) { 
      alert("至少保留一行!"); 
    } 
    else{ 
      if (confirm("確認刪除?")) { 
        $(this).parent().parent().remove(); 
      } 
    } 
  }); 
}); 
</script>
</head>
<body>
<table border="1">
  <tr>
    <td>姓名:</td>
    <td><input type="text" id="name" name="name" /></td>
    <td>地址:</td>
    <td><input type="text" id="address" name="address" /></td>
    <td><input type="button" class="delOneRow" value="刪除" /></td>
  </tr>
</table>
<input type="button" id="addOneRow" value="新增一行" />
</body>
</html>

上面你的程式碼實現新增或者刪除行的功能，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$("#addOneRow").click(function(){})，為新增按鈕註冊click事件處理函式。

（3）.var tempTr=$("tr:first").clone(true)，克隆第一行的資料，採用深度克隆，具體可以參閱下面的相關閱讀。

（4）.$("tr:last").after(tempTr)，在最後一行插入克隆的行。

（5）.$("tr:last > td > #name").val("")，將最後一個tr行的使用者名稱文字框的值設定為空，其實就是講新新增的行的文字框的內容設定為空，因為上面採用的是深度拷貝，否則會將資料一起拷貝過來。

（6）.$("tr:last > td > #address").val("")，和上面是一樣的道理。

（7）.$(".delOneRow").click(function() { })，為刪除按鈕註冊click事件處理函式。

（8）.if ($("tr").length < 2) { alert("至少保留一行!"); } ，如果行數只剩下一行，那麼就會彈出提示。

（8）.else{ if (confirm("確認刪除?")) {$(this).parent().parent().remove();}}，點選刪除的時候彈出確認框，這樣的話會將當前刪除按鈕的父元素的父元素刪除，其實就是tr刪除。

二.相關閱讀：

（1）.:first選擇器參閱jQuery :first一章節。 

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

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

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

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

相關文章