Question

我需要在鼠标悬停时突出显示一个表格行。看起来很容易做到，对吧？特别是使用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）{background-color：＃f3f3f3; }

Answer 1

如果您不需要IE6支持，可以使用一些简单的CSS完成突出显示：

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

Answer 2

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

以下是您使用它的方式。

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

小心

Answer 3

测试时是否实际弹出警告消息？

如果是这样，问题就出在你的CSS上了。我花了很长时间才意识到应用于tr标签的大多数样式都没有任何效果。因此，通常，您需要将样式应用于行中的每个td

.highlight td {highlighted appearance}

而不是

.highlight {highlighted appearance}

Answer 4

+1 wheresrhys。使用.highlight td上的背景规则使您的“TEST 2”对我来说很好。

'TEST 1'不会，因为不必要的parents()电话。

Answer 5

有一次，我发现这个解决方案 - 效果很好 - 只需添加！不幸的是，我不知道作者:(

<script type="text/javascript">

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

    </script>

Answer 6

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

Answer 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。

jQuery高亮表行

7 个答案: