Estoy creando algunas filas dinámicas en mi tabla y adjuntandoles un onclick listener :
var i=0; while(i!=5){ var row=table.insertRow(table.rows.length); var cell=row.insertCell(0); var cell1=row.insertCell(1); var cell2=row.insertCell(2); var cell3=row.insertCell(3); var cell4=row.insertCell(4); var cell5=row.insertCell(5); row.style.cursor="pointer"; row.addEventListener("click",f1); i+=1; } function f1(){ console.log(true); }Pero no importa cuántas veces haga clic en la fila, el evento nunca se activa. ¿Dónde me estoy equivocando aquí? por favor, ayúdame
Delegado al contenedor estático más cercano
function f1(e) { console.log(e.target.closest("tr").id, ";", e.target.textContent); } table.addEventListener("click", f1) var i = 0; const table = document.getElementById("tb"); while (i != 5) { var row = table.insertRow(table.rows.length); var cell0 = row.insertCell(0); cell0.textContent = "row " + i + ", cell 0" var cell1 = row.insertCell(1); cell1.textContent = "row " + i + ", cell 1" var cell2 = row.insertCell(2); cell2.textContent = "row " + i + ", cell 2" var cell3 = row.insertCell(3); cell3.textContent = "row " + i + ", cell 3" var cell4 = row.insertCell(4); cell4.textContent = "row " + i + ", cell 4" var cell5 = row.insertCell(5); cell5.textContent = "row " + i + ", cell 5" row.style.cursor = "pointer"; row.id = `Row${i}`; i += 1; } function f1(e) { console.log(e.target.closest("tr").id, ";", e.target.textContent); } table.addEventListener("click", f1) td { border: 1px solid black; } <table> <tbody id="tb"></tbody> </table>Una forma más nueva de crear una tabla de 5 por 6 usando literales de mapa y plantilla
const f1 = e => console.log(e.target.closest("tr").id, ";", e.target.textContent); const numRows = 5, numCells = 6; const table = document.getElementById("tb"); table.innerHTML = Array.from({length:numRows}) .map((_,i) => `<tr id="Row${i}"> ${Array.from({length:numCells}) .map((_,j) => `<td>Row ${i}, cell ${j}</td>`) .join('')} </tr>`) .join(''); table.addEventListener("click", f1) td { border: 1px solid black; } tr { cursor = "pointer"; } <table> <tbody id="tb"></tbody> </table>