当超链接被点击时，JQuery Pass COLOR默认行到下一行

嘿家伙它的一个斑马条表为jquery im想知道如何使超链接onclick通过某些行的颜色到底部或顶部？ “单击DN链接必须使突出显示的行级别.highlight移动到上一行。将UP和DN按钮的效果循环到表格中，以便在到达表格的顶部或底部时不会停顿“当超链接被点击时，JQuery Pass COLOR默认行到下一行

我的代码

$(function(){ 
 
    \t $(".odd").hover(function() \t { 
 
    \t $(this).toggleClass("hovered"); 
 
    \t }, function() { 
 
    \t $(this).toggleClass("hovered"); 
 
    \t }); 
 
    }); 
 
    
 
    
 
    $(function(){ 
 
    \t $(".even").hover(function() \t { 
 
    \t $(this).toggleClass("hovered"); 
 
    \t }, function() { 
 
    \t $(this).toggleClass("hovered"); 
 
    \t }); 
 
    });

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>

来源

2016-12-03 Sebastian Rojas

您是否尝试过使其工作？ – andi

这个怎么样？

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

顺便说一句，你不需要一个类添加到每一行。你可以在你的CSS中使用:nth-type selector来创建其他样式。

来源

2016-12-03 03:49:32 Mikey

当超链接被点击时，JQuery Pass COLOR默认行到下一行

回答

相关问题