JQuery Swap Farbe einer Tabellenzelle

Question

ich eine Tabellenzelle erstellt haben, wie

folgt

<tr> 
<td id = 'even'>row 8, cell 1</td> 
<td id = 'odd'>row 8, cell 2</td> 
</tr> 

Farben und Schriftgrößen eingestellt sind folgende CSS mit

#even { font-size : 10pt; color : red; background-color:yellow; } 
#odd { font-size : 20pt; color : white; background-color:green; } 

Jetzt möchte ich die Farbe selbst tauschen und ungerade Zellen, wenn eine Schaltfläche geklickt wird

Schriftgröße muss auch ausgetauscht werden.

Ich habe versucht, es auf diese Weise ist

$("#swapcolor").click(function (e) { 

     $('table #even').css('background-color','green'); 
     $('table #odd').css('background-color','yellow'); 

}); 

$("#swapfont").click(function() { 
     $('#even').css("font-size", "20pt"); 
     $('#odd').css("font-size", "10pt"); 
}); 

mein Problem zu tun, wie ich

Vielen Dank im Voraus für jede Hilfe die aktuelle Farbe der Zelle erfassen kann

Answer 1

$('table #even').css('background-color') kehrt die aktuelle Farbe

Answer 2

.css() kann auch als Getter-Methode

verwendet werden

var evenColor = $('table #even').css('background-color'); 
var oddColor = $('table #odd').css('background-color'); 

Answer 3

Es ist besser, wenn Sie eine übergeordnete Klasse verwenden, anstatt das CSS über JS selbst zu setzen. Der folgende Code schaltet eine Klasse für die #even und #odd tds

CSS

#even { font-size : 10pt; color : red; background-color:yellow; } 
#odd { font-size : 20pt; color : white; background-color:green; } 

#even.swapColor { background-green; } 
#odd.swapColor { background-yellow; } 

JQuery

$("#swapcolor").click(function (e) { 
     $('table #even, table #odd').toggleClass('swapColor'); 
}); 

Answer 4

Verwenden CSS-Klassen statt #IDs. Überprüfen Sie in jQuery, ob die ODD-Klasse für das Element vorhanden ist. Wenn ja, ersetzen Sie mit .even Klasse umgekehrt.