JQuery выделить ряд с изюминкой

0

Я не очень хороший jQuery, но я пытаюсь выяснить способ выделения строки в таблице, над которой моя мышь закончилась (скажем, зеленый). На странице есть только одна таблица. Я нашел jQuery, чтобы это произошло

$("tr").filter(function () {
    return $('td', this).length && !$('table', this).length
}).css({
    background: "ffffff"
}).hover(function () {
    $(this).css({
        background: "#C1DAD7"
    });},function () {
    $(this).css({
        background: "#ffffff"
    });
});

но мне нужно идти дальше. если я нажимаю на строку, я хочу, чтобы эта строка была подсвечена другим цветом (красным), затем наведите курсор, а также оставайтесь красным, если не нажать на другую строку. Таким образом, наведение подчеркивает строку, если она не была нажата. После того, как была нажата строка, наведение все еще работает, только не на щелкнутой строке, а щелкнутая строка остается красной, если не щелкнуть другую строку. Есть ли способ сделать это.

Я знаю, что цвет выше не соответствует красным или зеленым

  • 1
    обеспечить JSFIDDLE
  • 3
    Похоже, вы должны использовать гораздо больше CSS для этого и использовать JS только для переключения состояния нажатия.
Теги:

3 ответа

0
Лучший ответ

Если бы я был вами, я бы использовал классы вместо прямого стиля:

JS

$("tr").filter(function () {
    return $('td', this).length && !$('table', this).length
}).hover(function(){
    $(this).toggleClass('hover');
}).click(function(){
    $('.clicked').removeClass('clicked');
    $(this).toggleClass('clicked');
})

CSS

.hover{
    background : #C1DAD7;
}

.clicked{
    background : #f00;
}

Сценарий: http://jsfiddle.net/9wgGQ/

Поделиться
  • 0
    спасибо .. вопрос .. в вашем примере скрипки событие click, прикрепленное к hover или div ... просто пытается выяснить порядок, который он использует, чтобы узнать больше. Кроме того, если вы хотите, если мне нужно установить одну из строк при загрузке страницы для использования или установить для класса "clicked", что является хорошим способом для этого. Нужно ли называть div'ы и делать это таким образом ... интересно, какой будет хороший подход. Спасибо
  • 0
    По первому вопросу событие связывается с div (или tr в вашем случае). Jquery позволяет вам $(selector).method1().method2()... метод с 1 стеком: $(selector).method1().method2()... Что касается вашего второго вопроса, вы можете выбрать первый tr в стеке и смоделировать щелчок с помощью .trigger : .click(code already here).first().trigger('click')
Показать ещё 2 комментария
0

Смотрите эту скрипту: http://jsfiddle.net/jFIT/88r7p/

$("table tr").hover(
        function () { $(this).css({ background: "#C1DAD7" }); },
        function () { $(this).css({ background: "whitesmoke" }); }
).click(function() {
 $('table tr.selected').removeClass('selected');
  $(this).addClass('selected');
});
Поделиться
0 
$('tr').click(function(){
  $(this).parent().find('tr').css({background:'none'});
  $(this).css({ background: '#FF0000'});
});

Используйте это для фона DEMO

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню