點選刪除或者新增表格行簡單程式碼例項

admin發表於2017-03-12
原文網址 : https://www.softwhy.com/article-3073-1.html

在很多實際應用中，都有這樣的功能，點選可以刪除或者新增一行，下面就是一段能夠實現此功能的程式碼例項，非常的簡單，如果想要在實際中應用的話，還需要進一步的完善，當然這裡只是演示一下如何實現此功能。

程式碼如下:

[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 $c(tagname){ 
  return document.createElement(tagname); 
} 
$(document).ready(function(){ 
  $("#addrow").bind("click",function(){ 
    var tab=$("#tab"); 
    var tr=$c("tr"); 
    tab.append(tr); 
    var oLtd=$c("td"); 
    oLtd.innerHTML="螞蟻部落三"; 
    tr.appendChild(oLtd); 
    var oRtd=$c("td"); 
    oRtd.innerHTML="螞蟻部落四"; 
    tr.appendChild(oRtd); 
  })
  $("#deleterow").bind("click",function(){ 
    var tab = $("#tab tr:eq(0)"); 
    tab.remove(); 
  }); 
}); 
</script>
</head>
<body>
<table border='1' id="tab">
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
  </tr>
</table>
<input type="button" id="addrow" value="新增一行"/>
<input type="button" id="deleterow" value="刪除一行"/>
</body>
</html>

以上程式碼實現了我們的要求，點選能夠新增或者刪除一行，下面簡單介紹一下它的實現過程。

一.程式碼註釋:

1.function $c(tagname){return document.createElement(tagname)}，建立一個指定的物件元素，引數為標籤名稱，例如"td"。

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

3.$("#addrow").bind("click",function(){})，為按鈕註冊click事件處理函式。

4.var tab=$("#tab")，獲取table物件。

5.var tr=$c("tr")，建立一個tr物件。

6.tab.append(tr)，給table追加一個tr行。

7.var oLtd=$c("td")，建立一個td單元格物件。

8.oLtd.innerHTML="螞蟻部落三"，設定單元格的內容。

9.tr.appendChild(oLtd)，為tr追加一個td單元格。

10.var oRtd=$c("td")，建立一個td單元格物件。

11.oRtd.innerHTML="螞蟻部落四"，設定td單元格的內容。

12.tr.appendChild(oRtd)，為tr行追加一個td單元格。

13.$("#deleterow").bind("click",function(){})，為按鈕註冊一個click事件處理函式。

14var tab = $("#tab tr:eq(0)")，獲取表格的第一行。

15.tab.remove()，刪除此行。

二.相關閱讀:

1.document.createElement()函式可以參閱js createElement()和appendChild()函式的作用一章節。

2.append()函式可以參閱jQuery append()一章節。

3.innerHTML屬性可以參閱js innerHTML屬性的用法一章節。  

4.:eq選擇器可以參閱jQuery :eq()一章節。 

5.remove()函式可以參閱jQuery remove()一章節。 

相關文章