Javascript jQuery/CSS：单击“不工作”时高亮显示行

我有一张不同颜色的桌子。此外，鼠标悬停时，每一行都高亮显示。我正在尝试添加一个功能，当单击该行时，将该行高亮显示为浅绿色，一次只执行一行

我开始使用的代码是纯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');
     });

   });

这是我的发展

我把小提琴弄错了。我正在清理我正在使用的版本，并将在几分钟内更新它。我为这个错误道歉

更新

这张桌子现在很好用。如果可能的话，我只有一个问题，如何避免在表格标题上应用黄色突出显示

---

非常感谢。

您的代码工作正常，但您的小提琴是错误的：

您没有包括jQuery库

您正在CSS iframe中编写

标记

你在帖子里的代码是错误的<代码>单击行不是事件，请更改为单个

单击

如果行未显示为黄色，这是因为正常状态覆盖了悬停状态。只需使用

！重要信息

以其工作方式（或添加@j08691所述的更多具体信息）：

---

您的代码可以工作，但您的小提琴是错误的：

您没有包括jQuery库

您正在CSS iframe中编写

标记

你在帖子里的代码是错误的<代码>单击行不是事件，请更改为单个

单击

如果行未显示为黄色，这是因为正常状态覆盖了悬停状态。只需使用

！重要信息

以其工作方式（或添加@j08691所述的更多具体信息）：

和你的，你所拥有的很接近。问题在于CSS的特殊性。更改规则：

.hover {
    background-color: #FFFFCC;
}

致：

您的

也是如此。单击行
类。您的单击事件的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');
});

和你的，你所拥有的很接近。问题在于CSS的特殊性。更改规则：

.hover {
    background-color: #FFFFCC;
}

致：

您的
也是如此。单击行
类。您的单击事件的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');
});

别忘了这一点：

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

请参见别忘了这一点：

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

看
给你


而且

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

这修复了悬停问题，并使onclick按您希望的方式工作。
给您


而且

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

这解决了悬停问题，并使onclick按您希望的方式工作。
您忘记在小提琴中添加jQuery。此外，小提琴中没有与您提到的单击相关的内容。没有jQuery和CSS。我更新了fiddle链接。我为这个错误感到抱歉。在（'click-row'，…）
上不应该是
。在（'click'，…）
？这是一个复制错误，还是在你的真实代码中？那是我复制它时犯的一个错误。谢谢你指出。你忘了在你的提琴中添加jQuery。而且，你的提琴与你提到的点击无关。没有jQuery和CSS。我更新了fiddle链接。我为这个错误感到抱歉。在（'click-row'，…）
上不应该是
。在（'click'，…）
？这是一个复制错误，还是在你的真实代码中？那是我复制它时犯的一个错误。感谢您指出这一点。第1点和第2点只与不知道如何使用JSFIDLE的用户有关。我怀疑他们的代码是否有同样的问题。最重要的是，
！重要的
几乎永远都不是答案。好吧，我同意
！重要信息
请小心使用。但不是地狱，
！重要信息
有时是解决方案。在这种情况下，最好像您在回答中所说的那样采取更具体的方式，所以我同意两次：）第1点和第2点只与不知道如何使用JSFIDLE的用户有关。我怀疑他们的代码是否有同样的问题。最重要的是，
！重要的
几乎永远都不是答案。好吧，我同意
！重要信息
请小心使用。但不是地狱，
！重要信息
有时是解决方案。在这种情况下，最好像你在回答中所说的那样采取更具体的方式，所以我同意两次：）
！重要的
几乎永远都不是答案！重要的
几乎永远都不是答案谢谢你的帮助。唯一的问题是，在atime中单击时，只有一行应该是绿色的。现在，我似乎可以点击它，它保持绿色。更新为$（'.click-row'）。removeClass（'click-row'）；谢谢你的帮助。唯一的问题是，在atime中单击时，只有一行应该是绿色的。现在，我似乎可以点击它，它保持绿色。更新为$（'.click-row'）。removeClass（'click-row'）；谢谢，这个很好用。问题，您知道如何避免在表格标题上出现黄色突出显示吗？当然，像这样？将
$（'myTable tr'）
更改为
$（'myTable tbody tr'）
。非常感谢。谢谢，这个很好用。问题，您知道如何避免在表格标题上出现黄色突出显示吗？当然，像这样？将
$（'myTable tr'）
更改为
$（'myTable tbody tr'）
。非常感谢。