jQuery 高亮表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/759475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery highlight table row
提问by Steven
I need to highlight a table row on mouse over. Seems like an easy enough thing to do, right? Especially using jQuery. But alas, I'm not so lucky.
我需要在鼠标悬停时突出显示表格行。看起来很容易做到，对吧？特别是使用jQuery。但可惜，我没那么幸运。
I've tested different solutions for highlighting a table row, but nothing seem to work :-(
我已经测试了突出显示表格行的不同解决方案，但似乎没有任何效果:-(
I have tested the following scripts:
我已经测试了以下脚本：
// 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');
}
);
});
This is my HTML code
这是我的 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>
So.... could anyone give me a push in the right direction?
所以......有人可以给我一个正确的方向吗？
UPDATE
更新
I'm not using jQuery to highlight table rows any more, but CSS.
我不再使用 jQuery 来突出显示表格行，而是使用 CSS。
This is for list elements, but I'm guessing this will work for table rows as well:
这是用于列表元素，但我猜这也适用于表格行：
li:nth-child(odd) { background-color: #f3f3f3; }
li:nth-child(odd) { 背景色：#f3f3f3; }
回答by Julian
If you don't need IE6 support, the highlighting can be done with some simple CSS:
如果您不需要 IE6 支持，可以使用一些简单的 CSS 来完成突出显示：
#table tr:hover {
background-color: #ff8080;
}
回答by AlteredConcept
Try this plugin http://p.sohei.org/jquery-plugins/columnhover/
试试这个插件http://p.sohei.org/jquery-plugins/columnhover/
Here's how you use it.
这是你如何使用它。
<script type="text/javascript">
$(document).ready(function()
{
$('#storeListTable').columnHover({ hoverClass:'highlight'});
});
</script>
Take care
小心
回答by wheresrhys
Is the alert message actually popping up when you test?
测试时是否真的弹出警报消息？
If so, it's possible the problem is with your CSS. It took me a long time to realise that most styles applied to a tr tag don't have any effect. So, in general, you need to apply styles to each td in the row
如果是这样，则问题可能出在您的 CSS 上。我花了很长时间才意识到应用于 tr 标签的大多数样式都没有任何效果。所以，一般来说，你需要对行中的每个 td 应用样式
.highlight td {highlighted appearance}
rather than
而不是
.highlight {highlighted appearance}
回答by bobince
+1 wheresrhys. Using a background rule on .highlight tdmade your ‘TEST 2' work fine for me.
+1 wheresrhys。使用背景规则.highlight td使您的“测试 2”对我来说很好用。
‘TEST 1' won't, because of the unnecessary parents()call.
'TEST 1' 不会，因为不必要的parents()调用。
回答by Andrzej W
Once, I found this solution - works perfectly - just add! Unfortunately, I do not know the author :(
有一次，我找到了这个解决方案 - 完美运行 - 只需添加！不幸的是，我不认识作者:(
<script type="text/javascript">
$("#table_id").not(':first').hover(
function () {
$(this).css("background","red");
},
function () {
$(this).css("background","");
}
);
</script>
回答by BalaKrishnan?
Take a look at this How to highlight rows in a table on mouse hover?
看看这个 如何在鼠标悬停时突出显示表格中的行？
回答by zevero
Of course, the solution of Julian with simple CSS is to be preferred. If you want to do it dynamically in javascript, you could do it like this
当然，Julian 用简单 CSS 的解决方案是首选。如果你想在 javascript 中动态地做，你可以这样做
$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');});
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});
If you have more divs per row, you could specify the div to be highlighted by giving each row class="row" and putting 'div.row' as the 2nd argument of on().
如果每行有更多 div，则可以通过为每一行指定 class="row" 并将 'div.row' 作为 on() 的第二个参数来指定要突出显示的 div。
