jQuery/CSS: выделение строк по клику не работает

Question

У меня есть таблица с чередующимися цветами строк. Кроме того, при наведении мыши каждая строка подсвечивается. Я пытаюсь добавить функцию, когда выделять строку светло-зеленым цветом, когда нажимается строка, делая это только по одной строке за раз.

Код, который я начал, был чистым CSS, и теперь, чтобы добавить это событие, я добавляю jQuery.

К сожалению, я делаю что-то неправильно с классами, потому что, когда я нажимаю на строку, ничего не происходит. Может ли кто-нибудь сказать мне, что я делаю неправильно, и помочь мне исправить эту ошибку?

$(document).ready(function() { 

    $('#myTable tr').hover(function() { 
     $(this).addClass('hover'); 
    }, function() { 
     $(this).removeClass('hover'); 
    }); 

    $('tr').on('click-row', function() { 
     $(this).toggleClass('click-row'); 
    }); 

    }); 

Вот мое развитие Fiddle

я сделал ошибку на скрипке, что я включил. Я очищаю версию, с которой я работал, и обновляю ее через пару минут. Прошу прощения за ошибку.

UPDATE

Стол работает очень хорошо в настоящее время. У меня только один вопрос, если это возможно, как я могу избежать использования желтого выделения на заголовке таблицы?

Большое спасибо.

Answer 1

с вашим jsFiddle example fixed, что вы имели, было близко. Проблема заключалась в специфике вашего CSS. Изменение правила:

.hover { 
    background-color: #FFFFCC; 
} 

к:

tr.hover { 
    background-color: #FFFFCC; 
} 

То же самое для вашего .click-row класса. У вас также был неправильный код jQuery для вашего события click. Оно должно быть:

$('#myTable tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}).on('click', function() { 
    $('#myTable tr').not(this).removeClass('click-row') 
    $(this).toggleClass('click-row'); 
}); 

Answer 2

Ваш код работает, но ваша скрипка неправильно:

1. Вы пропустили, чтобы включить библиотеку JQuery
2. Вы пишете <style> тегов в CSS IFRAME.
3. Ваш код в сообщении неправильный. click-row не является событием, переход к одиночному click
4. Если строка не окрашена в желтый цвет, это связано с тем, что нормальное состояние переопределяет состояние зависания. Просто с !important в стиле он работает (или добавить больше конкретики, как @ j08691 сказал):

https://jsfiddle.net/xeqkb00c/1/

.hover { background-color:#FFFFCC !important; } 

Answer 3

Не забывайте об этом:

.hover { background-color:#FFFFCC !important; } 

см https://jsfiddle.net/xeqkb00c/4/

Answer 4

Здесь вы идете.

https://jsfiddle.net/wd4bs5vp/

$('tr').on('click', function() { 
    $(this).toggleClass('click-row'); 
}); 

и ...

.click-row { background-color: green !important; } 
.hover { background-color:#FFFFCC !important; } 

Это устраняет проблему парения и получает свой OnClick работает так, как вы хотели.