How to set the highlight of a table row with jquery from a javascript function call from an onclick in the table row?

Question

I'd like to add a nice light yellow highlight to the table row that the user is interacting with. They click on an 'A' link with an 'onclick' function call that uses jquery to do stuff (not important). The onclick is in an 'A' tag and in a table cell 'TD'.

Here is the table cell:

<td>
<a href="javascript:void(0);" 
onclick="deleteSchedule('Ajax/Admin_Delete_Schedule.cfm?SID=12345');"
title="Delete User"><img src="images/Delete_x16_.png" border="0"></a>
</td>

How do I get the reference for the table row and then set the background color? Do I need to give each table row a unique ID?

Since the answers are so detailed and excelelnt, I'll add this: I'd like to do this within my function but I'm not sure how to do it with 'this'. Thanks!! and OMG! stackoverflow is the greatest!!!

I could not get the below closest or parent examples to work but I did get this to work:

$(".rowClick").on("click", function() {
$(this).closest("tr").css('backgroundColor', '#FFFF99');
});

and of course I added the class 'rowClick' to the 'A' tag. The problem now is when the user clicks on another row the result is two rows highlighted. Any suggestions to remove the highlight from the previously selected row. (I'm guessing to change the background color on all the table rows then set the one clicked on.) - Thanks Again!

Mark · Accepted Answer · 2014-12-17 20:36:28Z

2

I recommend giving the anchors a class name, ie "rowClick", and use JavaScript to toggle a class to the TR.

<tr>
    <td>
    ...
    <a class="rowClick">
    ...
    </td>
</tr>

A CSS definition:

.bgYellow{ background-color: #FFFF00; }

And here's an example using jQuery:

$(".rowClick").on("click", function() {
    $(this).closest("tr").addClass("bgYellow");
});

Depending on what you're doing, you can modify the function to instead toggleClass or other misc. options.

edited Dec 17, 2014 at 20:36

answered Dec 17, 2014 at 20:28

Mark

1,6981 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Hill · Accepted Answer · 2014-12-17 20:26:56Z

First of all, do not use an inline onclick method for this. Set up a proper jQuery event delegation function. So do something like this:

$(function(){
    $('td a').click(function(e){
     // 'e' refers to the event target here
      var row = $(e.target).closest('tr');
      // Insert whatever color value where yellow is
      $(row).css('backgroundColor', 'yellow')
    })
})

Even better would be to create a css class like

.tr-highlighted { background: yellow; transition: 200ms linear; }

Then add/remove the class with the class toggle function

    $(function(){
    $('td a').click(function(e){
     // 'e' refers to the event target here
      var row = $(e.target).parent();
      // Insert whatever color value where yellow is
      $(row).toggleClass('tr-highlighted')
    })
})

If you must use an inline onclick declaration, the above should still apply, however you will need to access this within your function to refer to the event target, instead of e being passed as an argument.

Alternatively, you can do this with no JS at all if you only want it highlighted while the person is hovering over the table row

tr:hover { background: yellow; transition: 200ms linear; }

IronFlare · Accepted Answer · 2014-12-18 14:59:34Z

To accomplish this, you can use the jQuery .closest() function.

$("td").click(function(e){
    $(e.target).closest("tr").css("background-color","yellow");
    $(e.target).closest("tr").siblings().css("background-color","white");
});

This code in plain English would be something like:

For each table cell that is clicked:

Find the nearest row and change its background color to yellow.
Find all of the other rows in the table and change their background colors to white.

http://jsfiddle.net/ogzankse/2/

EDIT: I changed the code to better reflect your situation. Instead of attaching the click event listener to the row itself, I added anchor tags inside of each row and attached the listener to that. I added a class to the anchor tag so that anchors outside of the table are ignored. The code now searches for the <td> that the clicked <a> tag is inside of, and then finds the nearest row and applies the CSS. The code is now:

$("a.intable").click(function(e){
    $(e.target).parent().closest("tr").css("background-color","yellow");
    $(e.target).parent().closest("tr").siblings().css("background-color","white");
});

http://jsfiddle.net/ogzankse/3/

Collectives™ on Stack Overflow

How to set the highlight of a table row with jquery from a javascript function call from an onclick in the table row?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related