代码实例如下:
<!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()函数将此字符串追加到表格的末尾，当点击删除按钮就会删除按钮所在的父节点，也就是当前行。