Home/ Questions/Q 6938819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:32:26+00:00

I have a table in which any time a user clicks on one of

  • 0

I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.

//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
    $(this).parent().toggleClass("tr_highlight_ed");
}));

How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You really need to post an example of the rendered markup. You don’t want to do a toggleClass, you would do a removeClass selecting the parent nodes…

    Assuming the following markup…

    <body>
...
  <table id="myTable">...</table>
...
</body>

    You could bind the following..

    $('body').click(function(evt){
  //evt.target is what was clicked on, which bubbles up to body
  //if it's anything inside #myTable, you will get the #myTable
  var el = $(evt.target).closest('#myTable');

  //if you didn't get #myTable, you clicked outside the table
  //remove the given class from all the tr's
  if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
    • 0