Store background-color when hover a table row in jQuery
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() {
开发者_如何学Go $(this).css("background-color", "#ffffff");
});
});
Anybody might provide a solution? Thanks
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`
});
});
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.
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
精彩评论