Farsh
Farsh

Reputation: 3

Add event listener to each td

Here, I'm generating table by creating td's and tr's by clicking buttons, how can I add event listener to every td, and when it's clicked I can know the tr where this td placed.

var table = document.createElement('table');
document.body.appendChild(table);

var tr = document.createElement('tr');
table.appendChild(tr);

var td = document.createElement('td');
tr.appendChild(td);

var createTd = document.createElement('button');
createTd.innerHTML = 'Create td';
document.body.appendChild(createTd);

var createTr = document.createElement('button');
createTr.innerHTML = 'Create tr';
document.body.appendChild(createTr);



createTd.addEventListener('click',function() {
  td = document.createElement('td');
  tr.appendChild(td);
})

createTr.addEventListener('click',function() {
  tr = document.createElement('tr');
  table.appendChild(tr);
})

Upvotes: 0

Views: 917

Answers (1)

Andrew Balitskyy
Andrew Balitskyy

Reputation: 26

You can add it

var createTd = document.createElement('button');
createTd.innerHTML = 'Create td';
createTd.onclick = function() {
  // to do something
};
document.body.appendChild(createTd);

var createTr = document.createElement('button');
createTr.innerHTML = 'Create tr';
createTr.onclick = function() {
  // to do something
};
document.body.appendChild(createTr);

Upvotes: 1

Related Questions