我需要在鼠标上突出显示一个表格行.看起来很容易做到,对吧？特别是使用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>
所以....有人能给我一个正确的方向吗？
UPDATE
我不再使用jQuery突出显示表行,而是使用CSS.
这是列表元素,但我猜这也适用于表行:
li:nth-child(odd){background-color:#f3f3f3; }
Jul*_*ian 33
如果您不需要IE6支持,可以使用一些简单的CSS完成突出显示:
#table tr:hover {
background-color: #ff8080;
}
试试这个插件http://p.sohei.org/jquery-plugins/columnhover/
这是你如何使用它.
<script type="text/javascript">
$(document).ready(function()
{
$('#storeListTable').columnHover({ hoverClass:'highlight'});
});
</script>
照顾自己
测试时,警报消息是否实际弹出？
如果是这样,问题可能出在你的CSS上.我花了很长时间才意识到应用于tr标签的大多数样式都没有任何效果.因此,通常,您需要将样式应用于行中的每个td
.highlight td {highlighted appearance}
而不是
.highlight {highlighted appearance}