CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mattman85208
Mattman85208

Reputation: 2100

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

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!

Upvotes: 2

Views: 1960

Answers (3)

IronFlare
IronFlare

Reputation: 2322

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/

Upvotes: 1

Mark
Mark

Reputation: 1680

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.

Upvotes: 2

Alex Hill
Alex Hill

Reputation: 711

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

Upvotes: 1

Related Questions