點選新增或者刪除表格行詳解

admin發表於2018-11-30

分享一段程式碼例項，它實現了點選新增或者刪除表格行的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  var show_count=20;
  var count=$("input:text").val();
  var fin_count=0;
 
  $("#btn_addtr").click(function(){
    fin_count=$("tr").length-1
    if(fin_count<show_count){
      $("tr:eq(1)").clone().appendTo("table");
      $("tr:last td input:first").val(++count);
    }
  });
});
function deltr(obj){
  var length=$("tr").length;
  if(length<=2){
    alert("至少保留一行");
  }
  else{
    $(arguments[0]).parent().parent().remove();
  }
}
</script>
</head>
<body>
<input type="button" id="btn_addtr" value="增行">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
    <td align="center" bgcolor="#CCCCCC">使用者名稱</td>
    <td align="center" bgcolor="#CCCCCC">型別</td>
    <td align="center" bgcolor="#CCCCCC">其他</td>
    <td></td>
  </tr>
  <tr>
    <td height="30" align="center"><input type="text" size="2" value="1" /></td>
    <td align="center"><input type="text" name="username" /></td>
    <td align="center"><select name="type">
        <option value="1">管理員</option>
        <option value="2">使用者</option>
      </select></td>
    <td align="center"><input type="text" name="username2" /></td>
    <td><input type="button" value="刪行"  onclick="deltr(this)" /></td>
  </tr>
</table>
</body>
</html>

點選對應按鈕能夠刪除和或者新增行，下面介紹一下實現過程。

一.程式碼註釋:

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

（2）.var show_count=20，宣告一個變數並賦值，用來規定最大的行數。

（3）.var count=$("input:text").val()，第一個文字框的value屬性值，也就是第一個id值。

（4）.var fin_count=0，宣告一個變數並賦初值為0。

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

（6）.fin_count=$("tr").length-1，將當前除去標題行之外的總行數賦值給變數fin_count。

（7）. if(fin_count<show_count)，判斷當前的除去標題行的總行數是否小於規定的行數。

（8）.$("tr:eq(1)").clone().appendTo("table")，克隆第一行並將其追加到表格的尾部。

（9）.$("tr:last td input:first").val(++count);，設定行的id。

（10）.function deltr(obj){}，此函式用來刪除一行，引數是傳遞的一個物件。

（11）.var length=$("tr").length，獲取總行數。

（12）.if(length<=2){alert("至少保留一行")}，如果總行數小於等於2，則彈出提示。

（13）.$(arguments[0]).parent().parent().remove();，刪除當前按鈕父元素的父元素，也就是當前行。

特別注意:arguments[0]是函式傳遞的第一個引數，也就是按鈕物件this。

二.相關閱讀:

（1）.$("input:text")參閱jQuery :text一章節。

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

（3）.$("tr:eq(1)")參閱jQuery :eq()一章節。

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

（5）.appendTo()參閱jQuery appendTo()方法一章節。 

（6）.$("tr:last td input:first")參閱jQuery :last和jQuery :first一章節。 

（7）.arguments參閱JavaScript arguments物件一章節。

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

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

相關文章