Сохранить цвет фона при наведении курсора на строку таблицы в jQuery - PullRequest
Новая
       37

Сохранить цвет фона при наведении курсора на строку таблицы в jQuery

1 голос
/ 05 октября 2011

У меня есть 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");
                });
            });

Любойможет предоставить решение?Спасибо

Ответы [ 3 ]

2 голосов
/ 05 октября 2011

Предыдущее (оригинальное) значение можно сохранить в свойстве data: 

$(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'));
    });
});

Если вы используете HTML5 , вы можете установить свойство data непосредственно в элементе <tr> ( docs ): 

<tr style="background-color: #abc123;" data-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')); // Already set via the data-originalBg attribute of the `tr`
    });
});
1 голос
/ 17 февраля 2013

Если ваш цвет подсветки является статическим (как это выглядит), то альтернативным подходом было бы создание класса, называемого что-то вроде: 

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

, а затем просто: 

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

И вы получите обратно оригинальный цвет фона бесплатно (проверено в chrome 24.0.1312.57 m и FF 18.0.2 на win 7).

Toby

1 голос
/ 05 октября 2011

Вы пробовали 

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

Таким образом, varaible является глобальным, поэтому запоминает значение.

...