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代码
Title ID Navn E-post Nettside 10 Boss Store Oslo E-post www 8 Brandstad Oslo City E-post www 7 Fashion Partner AS E-post www 1 Follestad E-post www 2 Follestad E-post www
所以….有人能给我一个正确的方向吗？
UPDATE
我不再使用jQuery突出显示表行，而是使用CSS。
这是列表元素，但我猜这也适用于表行：
li：nth-child（odd）{background-color：＃f3f3f3; }
试试这个插件http://p.sohei.org/jquery-plugins/columnhover/
这是你如何使用它。
照顾自己
如果您不需要IE6支持，可以使用一些简单的CSS完成突出显示：
#table tr:hover { background-color: #ff8080; }
测试时警报消息是否实际弹出？
如果是这样，问题可能出在你的CSS上。 我花了很长时间才意识到应用于tr标签的大多数样式都没有任何效果。 因此，通常，您需要将样式应用于行中的每个td
.highlight td {highlighted appearance}
而不是
.highlight {highlighted appearance}
+1 wheresrhys。 使用.highlight td的背景规则使你的’TEST 2’对我来说很好。
‘TEST 1’不会，因为不必要的parents()调用。
有一次，我发现这个解决方案 – 效果很好 – 只需添加！ 不幸的是，我不知道作者:(
看看这个如何在鼠标hover时突出显示表格中的行？
当然，Julian与简单CSS的解决方案是首选。 如果你想在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。