javascript - tbody - Obtenga la ID de "append(<tr><td=" ID ">..."

llenar tabla html con javascript

Question

Estoy llenando una tabla con algunos datos que obtengo de la base de datos de firebase, y para eso estoy usando 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>");

Pero entonces, no sé cómo usar los botones "Eliminar" y "Editar" en cada fila de la tabla, ¿no debería tener el ID de cada fila? Pero entonces, ¿cómo obtengo el ID de cada fila si las filas se agregan dinámicamente?

Answer 1

Tiene una ID de objeto de su modelo de datos ... agréguela como un atributo a la fila.

Luego use una poligonal a la fila closest() para aislar las instancias

A continuación se asume un botón con clase agregada:

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

A continuación, use la delegación de eventos para tener en cuenta los elementos que aún no existen en el tiempo de ejecución

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