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()函数将此字符串追加到表格的末尾,当点击删除按钮就会删除按钮所在的父节点,也就是当前行。
上一篇:安卓应用运营知识:VersionCode和VersionName


下一篇:寻找100以内素数的不同境界