當超鏈接被點擊時，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默認行到下一行

回答

相關問題