标签：
点击按钮添加或者删除一行实例代码:
网站在填写表达的时候又很多的选择空间，甚至可以自行添加需要添加的内容，例如可以点击按钮添加一个表达项，如果不需要的话可以点击一个按钮删除，下面就简单介绍一下如何实现此效果。
代码实例如下:
<!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/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5105079.html
