动态添加和删除行

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>

我的添加按钮很好用，但是我的删除按钮不起作用。当点击删除行时，什么也没有发生。

- Morteza

---

它在这里：'<tr><td>4<span onclick="del()">删除行</span></td></tr>' 停止踩负！ - gdoron

几件事情。1. 当使用内联脚本时，this 指的是窗口。 2. 你需要用 closest 替换 parent。 3. 最好使用 delegate event 请参见我下面更新的答案。 - gdoron

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()
}

示例

---

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

我认为更简单的方法是将一个类添加到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();
}

工作示例

---

还有一个重要提示

不要忘记将整个代码放在

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

简而言之

$(function() {..})

- thecodeparadox

---

你不必委托。当动态创建 span 时，可以绑定点击事件。 - Explosion Pills

Answer 2

有几件事情需要注意。

1. 当使用内联脚本时，this 指的是窗口对象。
2. 需要将 parent 替换为 closest。
3. 最好使用 delegate event。

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

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

- gdoron

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 示例。

- j08691

Answer 4

this 不会成为 span，因此它不会找到父元素。我根本不会为这些创建全局函数，也不会使用脚本属性。我会将其重写为：

<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>

- Explosion Pills

Answer 5

你应该使用：

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

- sushil