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

   });

这是我的发展小提琴

我在包含的小提琴上犯了一个错误.我正在清理我正在使用的版本,并将在几分钟内更新它.我为这个错误道歉.

UPDATE

桌子现在工作得非常好.如果可能,我只有一个问题,如何避免在表格标题上应用黄色突出显示？

非常感谢.

Answer 1

有了您的jsfiddle例如固定的,你有很接近.问题在于CSS的特殊性.更改规则:

.hover {
    background-color: #FFFFCC;
}

至:

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

你的.click-row班级也是如此.你的点击事件也有错误的jQuery代码.它应该是:

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