从“append（< tr>< td =" ID"> ...”获取ID [英] Get the ID from "append(<tr><td="ID">..."

问题描述

我正在使用从firebase数据库获取的一些数据填充表，为此我正在使用append（）

  $（＃table_body）。append（< tr>< td>+ nome +< / td>+ 
< td>+ marca +< / td& ;+ 
< td>+ modelo +< / td>+ 
< td>+ setor +< / td>+ 
 < td>+ responsavel +< / td>+ 
 
< td>< div按钮>+ 
< button>删除< / button> ++ 
< button>编辑< / button>+ 
< / div>< / td>< / tr>）; 
  

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

解决方案

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

然后使用遍历 nearest（） 行隔离实例

假设添加了类的按钮：

 < tr data-id =idFromFirebaseObject> 
 .... 
< button class =delete-btn>删除< / button> 
  

然后使用事件委托来解释尚不存在的元素在运行时

  $（＃table_body）。on（'click'，'。delete-btn'，function e）{
 //this是
上的元素事件var $ row = $（this）.closest（'tr'），
 rowId = $ row.data（'id '）; 
 //用FB做你的事情，然后成功回调删除行
 .... 
 $ row.remove（）; 
}）
  

I am filling a table with some data that I get from firebase database, and for that I am using 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>");

But then, I don't know how to use the "Remove" and "Edit" buttons on each row of the table, shouldn't I have the ID of each row? But then, how do I get the ID of each row if the rows are added dynamically?

解决方案

You have an object ID from your data model ... add that as an attribute to the row.

Then use a traverse to closest() row to isolate instances

Following assumes a button with class added :

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

Then use event delegation to account for elements that don't yet exist at run time

$("#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();
})

这篇关于从“append（< tr>< td =" ID"> ...”获取ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！