Sometimes, we want to make a table row clickable with JavaScript.

In this article, we’ll look at how to make a table row clickable with JavaScript.

How to make a table row clickable with JavaScript?

To make a table row clickable with JavaScript, we can use jQuery.

For instance, we write:

<table>
  <tbody>
    <tr>
      <td><a href="#">Column 1</a></td>
      <td><a href="#">Column 2</a></td>
      <td><a href="#">Column 3</a></td>
    </tr>
  </tbody>
</table>

to add a table.

Then we write:

.highlightRow {
  background-color: green
}

to set background color for the highlightRow class.

Next, we write:

$('tr').click(function() {
  $(this).toggleClass('highlightRow');
});

to add an event handler for tr element clicks.

When we click on them, we call the toggleClass method on the tr element to toggle the highlightRow class.

Conclusion

To make a table row clickable with JavaScript, we can use jQuery.