JavaScript to add table row onclick events

Question

I'm new to Javascript. I want to add onclick events to table rows. I'm not using JQuery.

I loop thru the rows and use a closure to make sure I have the state of the outer function for each row. The looping works. Using alerts, I see the function being assigned for each iteration. But when I click the row, no alert is displayed. Below is the HTML and code that can be loaded.

Why are the table row events not working?

function example4() {
  var table = document.getElementById("tableid4");
  var rows = table.getElementsByTagName("tr");
  for (var i = 0; i < rows.length; i++) {
    var curRow = table.rows[i];
    //get cell data from first col of row
    var cell = curRow.getElementsByTagName("td")[0];
    curRow.onclick = function() {
      return function() {
        alert("row " + i + " data=" + cell.innerHTML);
      };
    };
  }
}

function init() {
  example4();
}
window.onload = init;

Use loop to assign onclick handler for each table row in DOM. Uses Closure.
<table id="tableid4" border=1>
  <tbody>
    <tr>
      <td>Item one</td>
    </tr>
    <tr>
      <td>Item two</td>
    </tr>
    <tr>
      <td>Item three</td>
    </tr>
  </tbody>
</table>

You're returning a function within a function. This would require for another function within the onclick to call the returned function. — jeremy
– jeremy, Commented Dec 26, 2012 at 18:00
@Mathletics: I'm using closures because I want the event to return the row that was clicked. On an earlier version of the code, I kept getting row 3 always being returned. My understanding is that closures will solve this problem. — Alex_B
– Alex_B, Commented Dec 26, 2012 at 18:13

mplungjan · Accepted Answer · 2023-12-28 08:31:26Z

Task

Use loop to assign onclick handler for each table row in DOM. Use Closure.

function example4() {
  let table = document.getElementById("tableid4");
  let rows = table.rows;

  for (let i = 0; i < rows.length; i++) {
    // Using a closure in a modern way
    ((row, index) => {
      row.addEventListener('click', () => {
        alert(`row ${index} data=${row.querySelector('td').textContent}`);
      });
    })(rows[i], i);
  }
}
window.addEventListener('DOMContentLoaded', example4);

<table id="tableid4" border="1">
  <tbody>
    <tr>
      <td>Item one</td>
    </tr>
    <tr>
      <td>Item two</td>
    </tr>
    <tr>
      <td>Item three</td>
    </tr>
  </tbody>
</table>

However with let there is no need for a closure

function example4() {
  let table = document.getElementById("tableid4");
  let rows = table.rows;

  for (let i = 0; i < rows.length; i++) { // the "let" does the job
    rows[i].addEventListener('click', function() {
      alert(`row ${i} data=${this.querySelector('td').textContent}`);
    });
  }
}
window.addEventListener('DOMContentLoaded', example4);

<table id="tableid4" border="1">
  <tbody>
    <tr>
      <td>Item one</td>
    </tr>
    <tr>
      <td>Item two</td>
    </tr>
    <tr>
      <td>Item three</td>
    </tr>
  </tbody>
</table>

This brings me to a pet peeve of mine: looping eventListeners

If we delegate, the script is simpler and easier to read

const items = ["Item one", "Item two", "Item three"];

window.addEventListener('DOMContentLoaded', () => {
  // create a table using an array. This can be as complex as needed depending on the data.
  document.getElementById('container').innerHTML =
    `<table id="tableid4" border="1">
      <tbody>
        ${items
          .map((item,i) => `<tr data-idx="${i}"><td>${item}</td></tr>`)
          .join('')}
      </tbody>
    </table>`;


  document.querySelector('#tableid4 tbody')
    .addEventListener('click', (e) => {
      const tgt = e.target.closest('tr');
      if (!tgt) return; // not clicking in a row
      alert(`row ${tgt.dataset.idx} data=${tgt.querySelector('td').textContent}`);
    });
});

<div id="container"></div>

This was the canonical way in 2012

By using a closure (function() {...})(i), you're creating a new scope where the current value of i is passed and preserved in cnt for each iteration. This way, each click handler retains its own separate cnt value, which corresponds to the row index at the time the handler was created.

function example4() {
    var table = document.getElementById("tableid4");
    var rows = table.rows; // or table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = (function() { // closure
            var cnt = i; // save the counter to use in the function
            return function() {
              alert("row"+cnt+" data="+this.cells[0].innerHTML);
            }    
        })(i);
    }
}
window.onload = function() { example4(); }

@ParkerSuperstar suggested that the i in (i) is not needed.

for (var i = 0; i < rows.length; i++) {
    rows[i].onclick = (function() {
        var cnt = i; 
        return function() {
            alert("row" + cnt + " data=" + this.cells[0].innerHTML);
        }    
    })();
}

That is because the closure (function() {...})() is immediately invoked at each iteration of the loop. This creates a new execution context for each iteration.

Within this closure, var cnt = i; captures the current value of i for each iteration. Because a new closure is created for each iteration of the loop, each closure has its own execution context, and thus its own cnt variable.

@mplungian: I'm trying to understand how this works. You've done two things. 1) You've enclosed the outer function in parens and added a parameter i. 2) You saved i as cnt in the outer function, so now the inner function sees cnt. I don't understand why the inner function doesn't see i.
That is exactly what a closure does. The first function takes a copy that stays static inside the inner function

jeremy · Accepted Answer · 2012-12-26 18:03:23Z

1

I'm not quite sure why you're using a closure here, could you be a bit more elaborate?

The reason you're not seeing the desired alert is because within the onclick function, you're returning another function. I.e:

window.onload = function() {
    return function() {
        alert("Closure... why?");
    };
};

Something like this won't really work because you're never calling the nested function... try it without using the closure, or comment explaining why you want a closure because you're explanation didn't make much sense to me.

answered Dec 26, 2012 at 18:03

jeremy

10.1k4 gold badges41 silver badges61 bronze badges

1 Comment

Alex_B Over a year ago

I want to eventually return the row information when the row is clicked. I thought the way I nested a return f() inside a function makes the inner function close over the scope of the outer function's variables, thus giving me access to the row information. I wanted the alert to show me that information.

zafus_coder · Accepted Answer · 2012-12-26 18:21:09Z

0

You just have to remove an extra function and script will be like this

<script>
 function example4() {
    var table = document.getElementById("tableid4");
cells = table.getElementsByTagName('td');

 for (var i=0,len=cells.length; i<len; i++){
 cells[i].onclick = function(){
    alert(this.innerHTML);

}
 }
}
 function init() { example4(); }
 window.onload = init;   
 </script>

edited Dec 26, 2012 at 18:21

answered Dec 26, 2012 at 18:10

zafus_coder

4,6312 gold badges14 silver badges13 bronze badges

3 Comments

jeremy Over a year ago

how is this different (besides the evident less informative factor) from my answer?

mplungjan Over a year ago

It is not and won't work. It will alert row3 each time jsfiddle.net/mplungjan/zwW4a

mplungjan Over a year ago

That will alert any cell content when any cell is clicked and not know which row number was clicked

Collectives™ on Stack Overflow

JavaScript to add table row onclick events

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related