单击超链接时，jQuery将默认行的颜色传递给下一行

Question

hey guys its a zebra strip table for jquery im wondering how can i make the hyperlink onclick pass the color of certain row to the bottom or top? 大家好，它是jquery的斑马线表，我想知道如何让超链接onclick将某些行的颜色传递到底部或顶部？ "Clicking the DN link must cause the highlighted row class .highlight to move up to the previous row. Loop the effect of the UP and DN buttons around the table so it doesn't stall when you reach the top or bottom of the table. " “单击DN链接必须使突出显示的行类.highlight移至上一行。在表格周围循环使用UP和DN按钮的效果，这样当您到达表格的顶部或底部时，它不会停止。 ”

my code 我的密码

 $(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>

Answer 1

How about this? 这个怎么样？

 $(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>

By the way, you don't need to add a class to each row. 顺便说一句，您不需要向每行添加一个类。 You could use the :nth-type selector in your CSS to create alternative styles. 您可以在CSS中使用：nth-type选择器来创建其他样式。

单击超链接时，jQuery将默认行的颜色传递给下一行

问题描述

1 个解决方案

解决方案1
0 2016-12-03 03:49:32

单击超链接时，jQuery将默认行的颜色传递给下一行

问题描述

1 个解决方案

解决方案1 0 2016-12-03 03:49:32

解决方案1
0 2016-12-03 03:49:32