Question

I’m using jQuery 1.6.4 and I have an html table. I assign the table an id = “tbl” and then use a click event to dynamically find which row was clicked. In that row I want to highlight it so the user can see which row was clicked.

I used some code in a jQuery book and modified it for using it with (this). However, it’s not highlighting the row.

Here is my code:

$('#tbl tr').click(function() { 
                //$('div.poem-stanza').addClass('highlight');
                $(this).addClass("highlight");
...

In firebug I verify that (this) is referencing a tr element, but for some reason the code doesn’t work with the highlighting. What do I need to do for this to work dynamically using (this)?

Based on the comments, I double checked and didn’t have .highlight in my css file. I had added it for other named elements and I had a typo in my reference to the css file. Thanks to firebug I was able to see everything that loaded and what was missing.

Answer 1

You can use this way:

$("tr").one("click", "#tbl", function() {
      $(this).addClass("highlight");
});

LIVE DEMO