嘿伙计们，它是 jquery 的斑马带表我想知道如何让超链接 onclick 将特定行的颜色传递到底部或顶部？ “单击 DN 链接必须使突出显示的行类 .highlight 向上移动到上一行。在表格周围循环 UP 和 DN 按钮的效果，这样当您到达表格的顶部或底部时它不会停止。 "
我的代码
$(function(){
$(".odd").hover(function() {
$(this).toggleClass("hovered");
}, function() {
$(this).toggleClass("hovered");
});
});
$(function(){
$(".even").hover(function() {
$(this).toggleClass("hovered");
}, function() {
$(this).toggleClass("hovered");
});
}); odd.hovered {
background-color:red;
}
.even.hovered{
background-color:red;
}
.highlight{
background-color:yellow;
}
.odd{
background-color:grey;
}
.even{
background-color:#D3D3D3;
}<!-- saved from url=(0061)https://csunix.mohawkcollege.ca/tooltime/10065/f15/zebra.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>
<h2>2: Zebra Striping Demo</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<table width="200" border="1">
<caption><a href="https://csunix.mohawkcollege.ca/tooltime/10065/f15/zebra.html#">UP</a> Zebra Striping Demo <a href="https://csunix.mohawkcollege.ca/tooltime/10065/f15/zebra.html#">DN</a></caption>
<tbody><tr class="odd">
<td>January</td>
<td>February</td>
<td>March</td>
</tr>
<tr class="even">
<td>April</td>
<td>May</td>
<td>June</td>
</tr>
<tr class="highlight" >
<td>July</td>
<td>August</td>
<td>September</td>
</tr>
<tr class="even">
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
<tr class="odd">
<td>Monday</td>
<td>Tuesday</td>
<td> Wednesday</td>
</tr>
<tr class="even">
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr class="odd">
<td>Spring</td>
<td>Summer</td>
<td>Fall</td></tr>
</tbody></table>
</body></html>最佳答案
这个怎么样？
$(function() {
$('#up').click(function(e) {
e.preventDefault();
var $current = $('tr.highlight'),
$previous = $current.prev();
// remove current row's highlight
$current.removeClass('highlight');
// highlight previous row if it exist
if ($previous.length)
$previous.addClass('highlight');
// otherwise highlight last row
else
$current.siblings().last().addClass('highlight');
});
$('#down').click(function(e) {
e.preventDefault();
var $current = $('tr.highlight'),
$next = $current.next();
// remove current row's highlight
$current.removeClass('highlight');
// highlight next row if it exist
if ($next.length)
$next.addClass('highlight');
// otherwise highlight last row
else
$current.siblings().first().addClass('highlight');
});
});tr.odd {
background-color: grey;
}
tr.even {
background-color: #D3D3D3;
}
tr.highlight {
background-color: yellow;
}
tr:hover {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
<caption><a href="https://csunix.mohawkcollege.ca/tooltime/10065/f15/zebra.html#" id="up">UP</a> Zebra Striping Demo <a href="https://csunix.mohawkcollege.ca/tooltime/10065/f15/zebra.html#" id="down">DN</a>
</caption>
<tbody>
<tr class="odd">
<td>January</td>
<td>February</td>
<td>March</td>
</tr>
<tr class="even">
<td>April</td>
<td>May</td>
<td>June</td>
</tr>
<tr class="highlight">
<td>July</td>
<td>August</td>
<td>September</td>
</tr>
<tr class="even">
<td>October</td>
<td>November</td>
<td>December</td>
</tr>
<tr class="odd">
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr class="even">
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
<tr class="odd">
<td>Spring</td>
<td>Summer</td>
<td>Fall</td>
</tr>
</tbody>
</table>顺便说一下，您不需要为每一行添加一个类。你可以使用 :nth-type selector在您的 CSS 中创建替代样式。
关于javascript - 单击超链接时，JQuery 将默认行的颜色传递给下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40943480/