I am creating some dynamic rows in my table and attaching onclick listener to them:
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);
}
But no matter how many times I click on the row, the event never gets triggered. Where am I going wrong here? Please help me
Delegate to nearest static container
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>Newer way to create a table of 5 by 6 using map and template literals
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>