Tôi cần làm nổi bật hàng của bảng trên chuột. Có vẻ như là một việc dễ dàng, phải không? Đặc biệt là sử dụng jQuery. Nhưng than ôi, tôi không may mắn như vậy.Hàng của bảng nổi bật jQuery
Tôi đã thử nghiệm các giải pháp khác nhau để làm nổi bật một dòng của bảng, nhưng không có vẻ làm việc :-(
Tôi đã thử nghiệm các kịch bản sau đây:
// 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');
}
);
});
Đây là HTML của tôi đang
<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>
Vì vậy .... bất kỳ ai cũng có thể đẩy tôi đi đúng hướng?
CẬP NHẬT
tôi không sử dụng jQuery để làm nổi bật hàng bảng nữa, nhưng CSS.
Đây là yếu tố cho danh sách, nhưng tôi đoán này sẽ làm việc cho hàng bảng cũng như:
li: nth-con (lẻ) {background-color: # f3f3f3; }
Cảm ơn bạn đời. Đó là plugin mà tôi đã sử dụng. – Steven
hoạt động nhưng cũ. sử dụng phương thức màu nền của phương thức từ Julian. lưu ý - tức là bây giờ khoảng 1,5% (và thu hẹp) - và di động là khoảng 7% (và đang tăng_ - vì vậy mà một trong những tập trung vào đi về phía trước là dễ dàng :) –