jQuery/ CSS:单击时突出显示行不起作用

jQuery/ CSS: Highlight row on click not working

本文关键字：显示 不起作用 CSS 单击 jQuery      更新时间：2023-09-26

我有一个交替行颜色的表格。此外，在鼠标悬停时，每一行都会突出显示。我正在尝试添加一个功能，当单击该行时，将行突出显示为浅绿色，一次只执行一行。

我

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

这是我的发展小提琴

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

更新

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

非常感谢。

修复了您的 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');
});

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

  1. 您错过了包含 jQuery 库
  2. 您正在 CSS iframe 中写入<style>标记。
  3. 你在帖子中的代码是错误的。 click-row不是事件，请更改为单click
  4. 如果行未显示为黄色，这是因为正常状态覆盖了悬停状态。只是在它工作的风格中!important（或如@j08691所说添加更多特异性）：

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

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

你去吧。

https://jsfiddle.net/wd4bs5vp/

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

和。。。

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

这解决了悬停问题，并使您的点击以您想要的方式工作。

不要忘记这一点：

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

见 https://jsfiddle.net/xeqkb00c/4/

相关文章：