Javascript 用于添加/删除行的jquery live函数

我正在尝试使用以下代码在表中添加/删除行：

脚本：

$(document).ready(function() {
  $('#btnAdd').live('click', function() {
    var name = $('#txtName').val();
    var name2 = $('#txtName2').val();
    $("#tbNames tr:last").append("<tr><td>" + name + "</td><td>" + name2 + "</td><td><simg ssrc='delete.gif' class='delete' height='15' /></td></tr>");
  });

  $('#tbNames td img.delete').live('click',function() { 
    $(this).parent().parent().remove(); 
  });
});

$（文档）.ready（函数（）{
$（'#btnAdd'）.live（'click'，function（））{
var name=$（'#txtName'）.val（）；
var name2=$（'#txtName2'）.val（）；
$（“#tbNames tr:last”）.append（“+name+”+name2+”）；
});
$（'#tbNames td img.delete'）.live（'click'，function（）{
$（this.parent（）.parent（）.remove（）；
});
});

HTML

<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
<table id="tbNames" >
  <tr>
    <td>Name</td>
    <td>Name2</td>
    <td>Delete</td>
  </tr>
  <tr>
    <td>Bingo</td>
    <td>Tingo</td>
    <td><simg ssrc="Delete.gif" height="15" class="delete" /></td>
  </tr>
</table>  

名称
姓名2
删除
答对 了
廷戈

添加可以正常工作，但删除不行

---

它会删除单击行后面所有动态添加的行。

我将添加功能从“append”更改为“after”

$（“#tbNames tr:last”）。在（“+name+”+name2+”）之后；

并更正了标记，因为它说的是“simg”而不是“img”

所以compelte解决方案是

<script type="text/javascript">
$(document).ready(function() {
            $('#btnAdd').live
      ('click',
      function() {
          var name = $('#txtName').val();
          var name2 = $('#txtName2').val();
          $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
      }
    );

            $('#tbNames td img.delete').live('click',function() { $(this).parent().parent().remove(); });
        }
    );
    </script>

<input id="txtName" type="text" />
        <input id="txtName2" type="text" />
        <input id="btnAdd" type="button" value="Add" />
          <table id="tbNames" >
                       <tr>
                          <td>Name</td>
                          <td>Name2</td>
                          <td>Delete</td>
                       </tr>
                       <tr>
                         <td>Bingo</td>
                         <td>Tingo</td>
                         <td><img src="Delete.gif" height="15" class="delete" /></td>
                      </tr>
           </table>

$（文档）.ready（函数（）{
$（'btnAdd'）。现场直播
（‘点击’，
函数（）{
var name=$（'#txtName'）.val（）；
var name2=$（'#txtName2'）.val（）；
$（“#tbNames tr:last”）。在（“+name+”+name2+”）之后；
}
);
$（'#tbNames td img.delete'）.live（'click'，function（）{$（this.parent（）.parent（）.remove（）；}）；
}
);
名称
姓名2
删除
答对 了
廷戈

如果要将TR附加到TR，则应将其附加到表格的tbody（或表格）中。或者TR

---

是的，就是这样！谢谢，爸爸，伍德兰！感谢gnarf，稍后还会尝试您的建议。。daddywoodland的解决方案效果很好。

<script type="text/javascript">
$(document).ready(function() {
            $('#btnAdd').live
      ('click',
      function() {
          var name = $('#txtName').val();
          var name2 = $('#txtName2').val();
          $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
      }
    );

            $('#tbNames td img.delete').live('click',function() { $(this).parent().parent().remove(); });
        }
    );
    </script>

<input id="txtName" type="text" />
        <input id="txtName2" type="text" />
        <input id="btnAdd" type="button" value="Add" />
          <table id="tbNames" >
                       <tr>
                          <td>Name</td>
                          <td>Name2</td>
                          <td>Delete</td>
                       </tr>
                       <tr>
                         <td>Bingo</td>
                         <td>Tingo</td>
                         <td><img src="Delete.gif" height="15" class="delete" /></td>
                      </tr>
           </table>

$("#tbNames tbody").append("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>")

$("#tbNames td img.delete").live('click', function() {
  $(this).closest('tr').remove();
});