你的位置:首页 > Java教程

[Java教程]jQuery如何动态添加具有删除按钮的行


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/