{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ゆ 、 Hurt° 的问题《jQuery highlight table row》','https://www.manongdao.com/q-311608.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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: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>
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; }
Once, I found this solution - works perfectly - just add! Unfortunately, I do not know the author :(
+1 wheresrhys. Using a background rule on
.highlight tdmade your ‘TEST 2’ work fine for me.‘TEST 1’ won't, because of the unnecessary
parents()call.If you don't need IE6 support, the highlighting can be done with some simple CSS:
Take a look at this How to highlight rows in a table on mouse hover?
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
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().
Try this plugin http://p.sohei.org/jquery-plugins/columnhover/
Here's how you use it.
Take care