javascript - 如何从表中删除一行

Question

我正在创建一个响应式数据表，每次我单击行末尾的添加按钮时都会添加一行。添加按钮变成删除按钮。这是我编写的代码

对于表格:

<table id="invoice_table_data">
<tr id="last_row">
        <td contenteditable id="item_name"></td>
        <td contenteditable id="item_code"></td>
        <td contenteditable id="description"></td>
        <td>
            <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button>
        </td>
    </tr>
</table>

点击添加时:

$("#btn_add").click(function() {
$("#invoice_table_data").append('<tr id="myTableRow'+'" ><td id="item_name'+n+'">'+item_name+'</td><td id="item_code'+n+'"> '+item_code+'</td><td id="description'+n+'">'+description+'</td><td><button type="button" name="delete_" id="delete_" data-idx="'+n+'">x</button></td></tr>');
n+=1;

还有我的删除函数:

$('#delete_').click( function () {
var nb=$(this).data('idx');
$("#last_row"+nb).remove();
});

但是，当我点击删除时，似乎什么也没有发生。有人可以帮忙吗？

Answer 1

HTML 中的标识符必须是唯一的，因此使用 CSS 类创建元素。然后可以使用类选择器。

更改脚本以将 HTML 呈现为

<button type="button" class="delete_">x</button>

目前您使用的称为“直接”绑定(bind)，它只会附加到您的代码进行事件绑定(bind)调用时页面上存在的元素。

使用.on()使用 Event Delegation 的方法动态生成元素的方法。 所以将您的代码更改为

$("#invoice_table_data").on('click', ".delete_", function(){
    $(this).closest('tr').remove();
});

var n = 1;
$("#btn_add").click(function() {
  $("#invoice_table_data").append('<tr><td>item_name' + n + '</td><td><button type="button"  class="delete_" data-idx="' + n + '">x</button></td></tr>');
  n += 1;
});

$("#invoice_table_data").on('click', ".delete_", function() {
  $(this).closest('tr').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="invoice_table_data">
  <tr id="last_row">
    <td id="item_name"></td>
    <td>
      <button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button>
    </td>
  </tr>
</table>