Menu
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.
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>
<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.
This is for list elements, but I'm guessing this will work for table rows as well:
li:nth-child(odd) { background-color: #f3f3f3; }
424
If you don't need IE6 support, the highlighting can be done with some simple CSS:
#table tr:hover {
background-color: #ff8080;
}
Try this plugin 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
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
