JQuery Passハイパーリンクがクリックされたときのデフォルト行の色です

jqueryのためのzebraストリップテーブルがありますか？どのようにハイパーリンクを作成できますか？onclickは特定の行の色を下側または上側に渡しますか？ "DNリンクをクリックすると、強調表示された行クラスのハイライトが前の行まで移動する必要があります。テーブルの上部または下部に達したときに停止しないように、このことについて。「JQuery Passハイパーリンクがクリックされたときのデフォルト行の色です

私のコード

$(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ハイパーリンクがクリックされたときのデフォルト行の色です

答えて

関連する問題