How do I add a onclick event listener to all of my dynamically created rows?

Question

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

Take a look at [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), it's much easier to listen a single click event on `tbody` element. — Teemu, May 12 '22 at 12:01
Give me eyes that haven't seen this mockery of the while loop — EzioMercer, May 12 '22 at 12:09
@EzioMercer lol. I updated my answer just because of your comment — mplungjan, May 12 '22 at 12:29

mplungjan · Accepted Answer · 2022-05-12T12:46:23.220

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>

How do I add a onclick event listener to all of my dynamically created rows?

1 Answers1