點擊按鈕添加或者刪除一行實例代碼:網站在填寫表達的時候又很多的選擇空間，甚至可以自行添加需要添加的內容，例如可以點擊按鈕添加一個表達項，如果不需要的話可以點擊一個按鈕刪除，下麵就簡單介紹一下如何實現此效果。代碼實例如下:點擊按鈕添加或者刪除一行-螞蟻部落 ID 用戶名 類型 ...
點擊按鈕添加或者刪除一行實例代碼:
網站在填寫表達的時候又很多的選擇空間，甚至可以自行添加需要添加的內容，例如可以點擊按鈕添加一個表達項，如果不需要的話可以點擊一個按鈕刪除，下麵就簡單介紹一下如何實現此效果。
代碼實例如下:
<!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(){ 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>
以上代碼實現了我們想要的效果，能夠刪除和或者添加行，下麵介紹一下實現過程。
一.實現原理:
原理比較簡單，當點擊添加按鈕的時候，會使用appendTo()函數為table添加一行，當點擊刪除按鈕的時候，能夠將當前按鈕父元素的父元素刪除，其實刪除的就是按鈕所在的當前行，具體可以參閱代碼註釋。
二.代碼註釋:
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()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10596
更多內容可以參閱:http://www.softwhy.com/jquery/
