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