在jQuery中悬停表格行时存储背景颜色 [英] Store background-color when hover a table row in jQuery

问题描述

我有一个 ASP.NET GridView 。每行都有不同的颜色，具体取决于其中一个显示字段的值。有两种可能的值，因此可以有两种不同的颜色。

现在我想突出显示鼠标悬停的GridView上的行。下面的脚本完美无缺，但是一旦我将鼠标悬停在外，颜色就会变成白色。

我想知道是否有办法以某种方式存储当鼠标悬停时，该行的原始颜色并在鼠标悬停后放回。

  $（document）.ready（function（）{
 $（＃<％= gdUpdateProduct.ClientID ％> tr：has（td））。hover（function（）{
 $（this）.css（background-color，Lightgrey）; 
}，function（）{ 
 $（this）.css（background-color，#ffffff）; 
}）; 
 
}）; 
  

我试过这个解决方案对我来说似乎很合理，但它不起作用，因为脚本不存储颜色值完成后执行：

  $（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）; 
}）; 
}）; 
  

任何人都可以提供解决方案？谢谢

您可以将以前的（原始）值存储在 data 属性：

  $（document）.ready（function（）{
 $（＃<％= gdUpdateProduct.ClientID％> tr：has（td）） hover（function（）{
 var $ this = $（this）; 
 
 if（！$ this.data（'originalBg'））{//第一次没有原始值
 $ this.data（'originalBg'，$ this.css（'background-color'））; //保存原始值
} 
 $ this.css（background （color-color，Lightgrey）; 
}，function（）{
 var $ this = $（this）; 
 
 $ this.css ，$ this.data（'originalBg'））; 
}）; 
}）; 
  

如果您使用 HTML5 ，则可以将<$ c直接位于< tr> 元素（ data /＃data2rel =nofollow> docs ）：

 < tr style =background-color ：＃abc123;数据originalBg = ＃ABC123 > ...< / tr> 
  

通过这种方式，您可以简单地避开：

  $（document）.ready（function（）{
 $（＃<％= gdUpdateProduct.ClientID％> tr：has（td）） .hover（function（）{
 $（this）.css（background-color，Lightgrey）; 
}，function（）{
 $（this）.css background-color，$ this.data（'originalBg'））; //已经通过`tr` 
}）; 
}）;的data-originalBg属性设置。 
  

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

解决方案

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

这篇关于在jQuery中悬停表格行时存储背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！