CODEWITHSUNDEEP
javascriptjquery
Martin Brody
Martin Brody

Reputation: 233

how to do a group "unhighlight" on highlighted rows in a table

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?

Upvotes: 0

Views: 544

Answers (2)

Tracker1
Tracker1

Reputation: 19334

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');
});

Upvotes: 2

Eliseu Monar dos Santos
Eliseu Monar dos Santos

Reputation: 942

$(document).bind('click.table', function (e) {
    if ( $("#my-table").has(e.target).length === 0 ) {
            $("#my-table").find("tr").removeClass('tr_highlight_ed');
    }
});

Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.

Upvotes: 2

Related Questions