jQuery 突出显示表格行答案

【问题标题】：jQuery highlight table rowjQuery 突出显示表格行
【发布时间】：2010-10-20 01:22:10
【问题描述】：

我需要在鼠标悬停时突出显示表格行。看起来是一件很容易的事情，对吧？特别是使用 jQuery。但很可惜，我没那么幸运。

我已经测试了突出显示表格行的不同解决方案，但似乎没有任何效果:-(

我已经测试了以下脚本：

// TEST one    
jQuery(document).ready(function() { 

  jQuery("#storeListTable tr").mouseover(function () { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works
  }); 

});

//TEST 2
jQuery(document).ready(function() { 

   $("#storeListTable tbody tr").hover( 
     function() {  // mouseover 
          $(this).addClass('highlight'); 
     }, 
     function() {  // mouseout 
          $(this).removeClass('highlight'); 
     } 
   );
});

这是我的 HTML 代码

<html> 
  <head> 
  <title>Title</title> 
  <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
  <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
  </head> 
  <body> 

<table id="storeListTable"> 
    <thead> 
      <tr class="even"> 
        <th>ID</th> 
        <th>Navn</th> 
        <th>E-post</th> 
        <th>Nettside</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="" id="store1"> 
        <td>10</td> 
        <td>Boss Store Oslo</td> 
        <td> <a href="mailto:">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="" id="store3"> 
        <td>8</td> 
        <td>Brandstad Oslo City</td> 
        <td> <a href="mailto:a@brandstad.no">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="even" id="store4"> 
        <td>7</td> 
        <td>Fashion Partner AS</td> 
        <td> <a href="mailto:b@fashionpartners.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="" id="store5"> 
        <td>1</td> 
        <td>Follestad</td> 
        <td> <a href="mailto:c@online.no">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
      <tr class="even" id="store6"> 
        <td>2</td> 
        <td>Follestad</td> 
        <td> <a href="mailto:d@follestad.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
    </tbody> 
  </table> 
  </body> 
</html>

那么....谁能给我一个正确的方向？

更新

我不再使用 jQuery 来突出显示表格行，而是使用 CSS。

这适用于列表元素，但我猜这也适用于表格行：

li:nth-child(odd) { 背景颜色：#f3f3f3; }

【问题讨论】：

标签： jquery wordpress

【解决方案1】：

如果你不需要 IE6 支持，可以通过一些简单的 CSS 来实现高亮：

#table tr:hover {
  background-color: #ff8080;
}

【讨论】：

这是我现在使用的默认方法（2012 年 6 月）。生活和学习:)

【解决方案2】：

试试这个插件http://p.sohei.org/jquery-plugins/columnhover/

这是你如何使用它的。

<script type="text/javascript"> 
    $(document).ready(function()
    {
        $('#storeListTable').columnHover({ hoverClass:'highlight'});
    });
</script>

保重

【讨论】：

谢谢伙计。这就是我最终使用的插件。
工作但旧。使用 Julian 的方法 background-color 方法。注意 - 即现在大约 1.5%（并且正在缩小） - 移动大约是 7%（并且正在增长_ - 所以接下来要关注哪一个很容易:)

【解决方案3】：

测试时真的会弹出警告消息吗？

如果是这样，则问题可能出在您的 CSS 上。我花了很长时间才意识到大多数应用于 tr 标签的样式都没有任何效果。所以，一般来说，你需要对行中的每个 td 应用样式

.highlight td {highlighted appearance}

而不是

.highlight {highlighted appearance}

【讨论】：

【解决方案4】：

+1 在哪里。在 .highlight td 上使用后台规则使您的“测试 2”对我来说很好。

'TEST 1' 不会，因为不必要的 parents() 调用。

【讨论】：

【解决方案5】：

有一次，我找到了这个解决方案 - 完美运行 - 只需添加！不幸的是，我不知道作者:(

<script type="text/javascript">

    $("#table_id").not(':first').hover(
        function () {
            $(this).css("background","red");
        }, 
        function () {
            $(this).css("background","");
        }
    );

    </script>

【讨论】：

【解决方案6】：

看看这个 How to highlight rows in a table on mouse hover?

【讨论】：

【解决方案7】：

当然，使用简单 CSS 的 Julian 解决方案是首选。如果你想在 javascript 中动态地做，你可以这样做

$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');});
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});

如果每行有更多 div，则可以通过为每行指定 class="row" 并将 'div.row' 作为 on() 的第二个参数来指定要突出显示的 div。

【讨论】：