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

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

更新

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

非常感谢。

Answer 1

使用jsFiddle example fixed，你所拥有的就是近在咫尺。问题在于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');
});

Answer 2

你的代码有效，但你的小提琴是错误的：

您错过了包含jQuery库
您正在CSS iframe中编写<style>个标记。
您在帖子中的代码是错误的。 click-row不是一个事件，更改为单click
如果行没有用黄色着色，那是因为正常状态会覆盖悬停状态。只需使用!important的样式（或者添加更多特性，如@ j08691所说）：

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

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

Answer 3

你走了。

https://jsfiddle.net/wd4bs5vp/

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

和...

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

这可以解决悬停问题并让您的onclick以您想要的方式工作。

Answer 4

不要忘记这一点：

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

请参阅https://jsfiddle.net/xeqkb00c/4/

jQuery / CSS：突出显示点击行不起作用

4 个答案: