动态添加和删除行

Question

这是我的js代码：

<script>
function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del()">del row</span></td></tr>');
}
function del(){
  $(this).parent('tr').remove();
}
</script>

和html：

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span onclick="add()">add row</span>

我的添加按钮效果不错，但我的del按钮不起作用。点击del行时没有任何事情发生。

Answer 1

您的代码几乎没有变化

function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');
}

function del(el) {
    $(el).closest('tr').remove()
}

<强> Working sample

---

另一种更简单的方法，不需要彻底改变代码

我认为更简单的是，如果您向del row span添加一个类并删除onclick，如下所示：

function add(){
  $('#myTable tr:last').after('<tr><td>4<span class="delRow">del row</span></td></tr>');
}

并设置委托事件处理程序，如下所示：

$('#myTable').on('click', 'span.delRow', del);

并编写您的del()函数，如下所示：

function del() {
  $(this).closest('tr').remove();
}

<强> Working Sample

---

还有一个重要的注意事项

不要忘记将整个代码放在

中

$(document).ready(function() {..})

简而言之

$(function() {..})

Answer 2

一些事情。

使用内联脚本时，

1。 this是窗口 2。您需要将parent替换为closest 3。更好地使用delegate event

function del(){
     $(this).closest('tr').remove(); // closest!!
}    

$('#myTable').on('click', 'span', del);

Answer 3

将del函数更改为：

function del(row){
  $(row).closest('tr').remove();
}​

和你的添加功能：

$('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');

<强> jsFiddle example

Answer 4

this不会是跨度，因此它不会找到父级。我根本不会为这些创建全局函数，也不会使用脚本属性。我会把它重写为：

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span id="add">add row</span>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$("#add").on('click', function () {
   $('#myTable tr:last').after(
      $("<tr>")
         .append($("<td>", {text: '4'})
            .append($("<span>", {text: 'del row'})
               .on('click', function () {
                  $(this).closest('tr').remove();
               })
            )
         )
   );
});
</script>

Answer 5

您应该使用：

$(this).parent('#myTable tr').remove();