Add onclick event to each row in a table

Question

I have an HTML table dynamically generated by js, and I want to add each row an onClick event.
Like this
(because of need to pass complex parameters in my original code, I use Javascript to add onclick function):

<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
    <thead>
        <th>Text</th>
        <th>MoreText</th>
        <th>Lorem</th>
        <th>Ipsum</th>
    </thead>
</table>
<br />


<script type="text/javascript">
    for (var i = 0; i < 4; i++) {
        document.getElementById("tableID").innerHTML += '<tr><td>Text</td><td>MoreText</td><td>Lorem</td><td>Ipsum</td></tr>';

        document.getElementById("tableID").rows[i+1].onclick = function () {
            alert("Hello World");
            //alert(i);
        };
    }
</script>
</body>
</html>

If the table row is fixed and declared in HTML document, using this method is working,
but in my code (dynamically generated table row), the onClick function only works in the last row.

I guess that maybe is asynchronous problem, but I can't figure out.

UPDATE
According to @Quentin's method, I edited my code. It works fine.

<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
    <thead>
        <th>Text</th>
        <th>MoreText</th>
        <th>Lorem</th>
        <th>Ipsum</th>
    </thead>
</table>
<br />

<script type="text/javascript">
    for (var i = 0; i < 4; i++) {
        var table = document.getElementById('tableID');

        var tr = document.createElement('tr');
        tr.onclick = function () {
            alert("Hello World");
        };

        var td1 = document.createElement('td');
        td1.innerText = "Text";
        var td2 = document.createElement('td');
        td2.innerText = "MoreText";
        var td3 = document.createElement('td');
        td3.innerText = "Lorem";
        var td4 = document.createElement('td');
        td4.innerText = "Ipsum";

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);

        table.appendChild(tr);
    }
</script>
</body>
</html>

Quentin · Accepted Answer · 2016-09-29 18:13:49Z

1

You are assigning a new value to innerHTML.

This erases all the existing DOM elements and the event handlers attached to them and creates new ones (but you haven't got any code to recreate the event handlers you are deleting).

Don't use innerHTML. Use standard DOM methods: createElement, appendChild, etc. Then you can add your new row to the table body without changing what is already there.

answered Sep 29, 2016 at 18:13

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CryMasK Over a year ago

Thank you for explain how the code work. I changed my code, and it works fine.

Per Östlund · Accepted Answer · 2016-09-29 18:34:44Z

<!DOCTYPE html>
<html>
<head>
<style>
  table td { cursor: pointer; border: 1px solid black; }  
  #out { color: red; }
</style>
</head>
<body>
<table id="tableID">
  <thead>
      <th>Text</th>
      <th>MoreText</th>
      <th>Lorem</th>
      <th>Ipsum</th>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="out"></div>

<script type="text/javascript">
  function createCell(i, row, text) {
    var td = document.createElement('td');
    var content = document.createTextNode(text + i);
    td.appendChild(content);
    td.addEventListener('click', function() { document.getElementById('out').innerHTML = 'You clicked ' + this.innerHTML; }, false);
    row.appendChild(td);
  }

  for (var i = 0; i < 4; i++) {
    var tr = document.createElement('tr');
    createCell(i, tr, 'a');
    createCell(i, tr, 'b');
    createCell(i, tr, 'c');
    createCell(i, tr, 'd');

    document.querySelectorAll('#tableID tbody')[0].appendChild(tr);
  }
</script>
</body>
</html>

This should probably work, see demo: http://jsbin.com/lucequgotu

Collectives™ on Stack Overflow

Add onclick event to each row in a table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related