在jQuery中悬停表行时存储背景颜色

Question

I have an ASP.NET GridView . Each row has a different color depending on the value of one of the displayed fields. There are two possible values therefore there can be two different colors.

Now I want to highlights the rows on the GridView hovered by the mouse. The below script works perfecty but once I hover the mouse out the color becomes white for any row.

I would like to know if there is a way to somehow store the "original" color of the row when the mouse hovers in and put it back once the mouse hovers out.

          $(document).ready(function() {
            $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
                    $(this).css("background-color", "Lightgrey");
                }, function() {
                    $(this).css("background-color", "#ffffff");
                });

            });

I tried this solution that seems quite logical to me but it does not work because the script does not store the value of color once it finishes to execute:

$(document).ready(function() {
            $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
                    var color = $(this).css("background-color");
                    $(this).css("background-color", "Lightgrey");
                }, function() {
                    $(this).css("background-color", "#ffffff");
                });
            });

Anybody might provide a solution? Thanks

Answer 1

You could store the previous (original) value in the data property:

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        var $this = $(this);

        if (!$this.data('originalBg')) { // First time, no original value is set.
            $this.data('originalBg', $this.css('background-color')); // Store original value.
        }
        $this.css("background-color", "Lightgrey");
    }, function() {
        var $this = $(this);

        $this.css("background-color", $this.data('originalBg'));
    });
});

If you're using HTML5 , you can set the data property directly in the <tr> element ( docs ):

<tr style="background-color: #abc123;" data-originalBg="#abc123"> ... </tr>

That way, you can simply get away with:

$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
        $(this).css("background-color", "Lightgrey");
    }, function() {
        $(this).css("background-color", $this.data('originalBg')); // Already set via the data-originalBg attribute of the `tr`
    });
});

Answer 2

If your highlight colour is static (which it appears to be) then an alternative approach would be to create a class called something like :

.highlight {
    background-color: #efefef !important;
} 

and then simply:

$("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() {
    $(this).addClass("highlight");
}, function() {
    $(this).removeClass("highlight");
});

And you'll get the original background colour back for free (tested in chrome 24.0.1312.57 m and FF 18.0.2 on win 7).

Toby

Answer 3

Have you tried

var color = '';
$(document).ready(function() {
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(
        function() {
            color = $(this).css("background-color");
            $(this).css("background-color", "Lightgrey");
        }, 
        function() {
            $(this).css("background-color", color);
        });
    });
});

This way the varaible is global so will remember the value.