jQuery 突出显示表格行
Posted
技术标签:
【中文标题】jQuery 突出显示表格行【英文标题】：jQuery highlight table row 【发布时间】：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;
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于jQuery 突出显示表格行的主要内容，如果未能解决你的问题，请参考以下文章