从 "append(<tr><td="ID">..." 获取 ID

Question

我正在用从 firebase 数据库中获取的一些数据填充一个表，为此我正在使用 append()

$("#table_body").append("<tr><td>" + nome + "</td>" +
                          "<td>" + marca + "</td>" +
                          "<td>" + modelo + "</td>" +
                          "<td>" + setor + "</td>" +
                          "<td>" + responsavel + "</td>" +

                          "<td><div buttons>"+
                                  "<button>Delete</button>"+" "+
                                  "<button>Edit</button>"+
                                "</div></td></tr>");

但是，我不知道如何使用表格每一行上的“删除”和“编辑”按钮，我不应该有每一行的 ID 吗？但是，如果行是动态添加的，如何获取每行的 ID？

Answer 1

您的数据模型中有一个对象 ID ...将其作为属性添加到行中。

然后使用遍历到closest() 行来隔离实例

以下假设添加了类的按钮：

<tr data-id="idFromFirebaseObject">
    .... 
    <button class="delete-btn">Delete</button>

然后使用事件委托来说明在运行时还不存在的元素

$("#table_body").on('click','.delete-btn', function(e){
   // "this" is element event occurred on
   var $row = $(this).closest('tr'),
       rowId = $row.data('id');
       // do your thing with FB then in success callback remove row
       ....
      $row.remove();
})