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