jQuery高亮表格行

我需要突出显示鼠标移过来的表格行。似乎是一件容易的事情，对吧？尤其是使用jQuery。但是，唉，我没那么幸运。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:[email protected]">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:[email protected]">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:[email protected]">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:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
    </tbody> 
    </table> 
    </body> 
</html>

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

UPDATE

我不使用jQuery任何更加突显表行，但CSS。

这是列表中的元素，但我猜这会为表行以及工作：

李：第n个孩子（奇）{背景颜色：＃f3f3f3; }

来源

2009-04-17 Steven

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

这里是你如何使用它。

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

照顾

来源

2009-04-18 06:04:27 AlteredConcept

谢谢队友。这就是我最终使用的插件。 – Steven 2009-05-13 22:54:19

作品，但旧的。使用Julian的方法背景色方法。注意 - 即现在大约是1.5％（和缩小） - 移动大约是7％（并且越来越多 - 所以哪一个专注于前进很容易:) – 2011-11-13 15:44:24

当您测试时，警报消息是否实际弹出？

如果是这样，这可能是你的CSS的问题。我花了很长时间才意识到应用于tr标签的大多数样式都没有任何影响。因此，在一般情况下，你需要样式应用到每个TD行

.highlight td {highlighted appearance}

中，而不是

.highlight {highlighted appearance}

来源

2009-04-17 09:36:33 wheresrhys

+1 wheresrhys。在.highlight td上使用背景规则使您的'测试2'适合我。

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

来源

2009-04-18 05:03:44 bobince

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

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

来源

2009-04-20 15:45:26 Julian

有一次，我发现这个解决方案 - 完美的作品 - 只是加！不幸的是，我不知道作者:(

<script type="text/javascript"> 

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

    </script>

来源

2011-07-12 20:31:29

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

来源

2012-05-30 09:27:39

当然，朱利安与简单的CSS的解决方案是首选。如果要动态做在JavaScript中，你可以做这样的

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

如果你有每行更多的div，你可以指定div来通过给每一行类=“行”，并把突出'div.row'作为on（）的第二个参数。

来源

2012-07-21 11:44:43 zevero

jQuery高亮表格行

回答

相关问题