标签：
jQuery如何动态添加具有删除按钮的行:
在实际用中，如果要操作表格的话，那最多的莫过于添加和删除行的操作，一般情况下，动态添加的行也可以动态删除，下面就简单介绍一下如何实现此操作，虽然比较简单，但是还是希望能够或多或少能够给需要的朋友带来一定的帮助。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>jQuery动态添加和删除行-蚂蚁部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#getAtr").click(function(){ var $str=‘‘; $str+="<tr align=‘center‘>"; $str+="<td><input type=‘text‘ name=‘advTitle[]‘/></td>"; $str+="<td><input type=‘file‘ name=‘img[]‘ /></td>"; $str+="<td><input type=‘text‘ name=‘advContent[]‘ /></td>"; $str+="<td><input type=‘text‘ name=‘advSource[]‘ /></td>"; $str+="<td><input type=‘text‘ name=‘advAuthor[]‘ /></td>"; $str+="<td><input type=‘text‘ name=‘advPosition[]‘ /></td>"; $str+="<td onClick=‘getDel(this)‘><a href=‘#‘>删除</a></td>"; $str+="</tr>"; $("#addTr").append($str); }); }); function getDel(obj) { $(obj).parent().remove(); } </script> </head> <body> <table align="center" border="1"width="100%"> <tr align="center"> <td>蚂蚁部落一</td> <td>蚂蚁部落二</td> <td>蚂蚁部落三</td> <td>蚂蚁部落四</td> <td>蚂蚁部落五</td> <td>蚂蚁部落六</td> <td align="center"><a href="#" id="getAtr">追加内容</a></td> </tr> <tbody id="addTr"> <tr align="center"> <td><input type="text" name="advTitle[]"/></td> <td><input type="file" name="img[]" /></td> <td><input type="text" name="advContent[]" /></td> <td><input type="text" name="advSource[]" /></td> <td><input type="text" name="advAuthor[]" /></td> <td><input type="text" name="advPosition[]" /></td> <td></td> </tr> </tbody> <tr align="center"> <td colspan="5"><input type="submit" value="全部添加" /></td> </tr> </table> </body> </html>
以上代码可以动态添加表格的行，并且表格行的末尾有删除按钮，当点击删除的时候，可以删除当前行，下面介绍一下实现过程。
一.实现原理:
原理特别的简单，就是事先声明一个字符串，此字符串就是要添加的行的内容，当点击追加按钮之后，就会通过append()函数将此字符串追加到表格的末尾，当点击删除按钮就会删除按钮所在的父节点，也就是当前行。
二.相关阅读:
1.click事件可以参阅jQuery的click事件一章节。
2.parent()函数可以参阅jQuery的parent()方法一章节。
3.remove()函数可以参阅jQuery的remove()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9099
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5088457.html
