JQuery Pass COLOR der Standardzeile zur nächsten Zeile, wenn Hyperlink geklickt wird

Hey Jungs ist ein Zebra Strip-Tabelle für jquery ich frage mich, wie kann ich den Hyperlink onclick die Farbe bestimmter Zeile nach unten oder oben übergeben? "Durch Klicken auf die DN-Verknüpfung muss die hervorgehobene Zeilenklasse .highlight in die vorherige Zeile verschoben werden. Schleifen Sie den Effekt der UP- und DN-Schaltflächen um den Tisch herum, damit er nicht an der Ober- oder Unterseite der Tabelle hängenbleibt . "JQuery Pass COLOR der Standardzeile zur nächsten Zeile, wenn Hyperlink geklickt wird

meinen Code

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

Quelle

2016-12-03 Sebastian Rojas

Haben Sie etwas versucht, damit es funktioniert? – andi

Wie wäre das?

$(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, brauchen Sie nicht eine Klasse zu jeder Zeile hinzuzufügen. Sie könnten die :nth-type selector in Ihrem CSS verwenden, um alternative Stile zu erstellen.

Quelle

2016-12-03 03:49:32 Mikey

JQuery Pass COLOR der Standardzeile zur nächsten Zeile, wenn Hyperlink geklickt wird

Antwort

Verwandte Themen