Cannot find gridview row with jQuery skin

Question

My jQuery script does not work when I have a skin applied to my gridview. Once I add in the skin I cannot find the tr anymore. I assume it has something to do with the way the tr gets constructed. Without the skin, the row is a clean

    <tr>data</tr>.

But with the skin the row is now

<tr style=....>data</tr>

Here is my jQuery that does work when I do not have skin applied to the gv.

 $(document).ready(function () {
        $('tr').mouseover(function () {
            $(this).toggleClass('highlightrow');
                }).mouseout(function() {
                    $(this).removeClass('highlightrow');
                })
    });

user447356 · Accepted Answer · 2011-04-03 14:42:08Z

1

The rows are found just fine, problem is that they have "hard coded" background color in their style so the background color in the class has no effect.

One way around this is to store the previous color then directly set the background color in mouseover and restore the previous color (to preserve the skin) in the mouse out event.

Code would look like:

$(document).ready(function () {
    $('tr').mouseover(function () {
        $(this).data("prev_color", $(this).css("background-color"));
        $(this).toggleClass('highlightrow').css("background-color", "yellow");
    }).mouseout(function() {
        $(this).removeClass('highlightrow').css("background-color", $(this).data("prev_color"));
    });
});

Live test case: http://jsfiddle.net/yahavbr/awEaP/1/

answered Apr 3, 2011 at 14:42

user447356

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

3 Comments

IMAbev Over a year ago

thanks! Works great. I just added $('tr:not(:first)').mouseover(function () { to avoid highlighting the header.

user447356 Over a year ago

@IMAbev cheers, glad I could help and thanks for sharing this useful information! :)

IMAbev Over a year ago

fyi I had multiple gridviews on a page all with .gridlink class. tr:not(:first) only effects the first gridview. I changed to tr:not(:firstchild) and it highlighted only the rows on all gv's - not the headers

František Žiačik · Accepted Answer · 2011-04-03 14:41:38Z

1

I bet it is due to style having higher priority than your css. How is your highlightrow defined? For example if you specify a background-color here and it is also in the tr's style, it gets ignored.

Maybe adding the !important clause could help:

.highlightrow
{
    background-color: Red !important;
}

answered Apr 3, 2011 at 14:41

František Žiačik

7,6041 gold badge38 silver badges61 bronze badges

3 Comments

IMAbev Over a year ago

that does work. The only down side (minor) is that it highlights the table head too. Never knew of the !important clause. I wonder about it's browser support?

user447356 Over a year ago

@IMA here is explanation: stackoverflow.com/questions/189621/…

František Žiačik Over a year ago

@IMAbev: about !important support: stackoverflow.com/questions/1330184/…

Collectives™ on Stack Overflow

Cannot find gridview row with jQuery skin

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related