JQuery своп Цвет ячейки таблицы

Question

Я создал ячейку таблицы следующим образом

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

цвета и размеры шрифта устанавливаются с помощью следующей CSS

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

Теперь я хочу поменять цвет даже и нечетные ячейки при нажатии кнопки

<button id='swapcolor' type="button" >Swap Colors</button> 

Размер шрифта также необходимо поменять.

я пытался сделать это таким образом

$("#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"); 
}); 

моя проблема заключается в том, как я могу захватить текущий цвет ячейки

заранее спасибо за любую помощь

Answer 1

$('table #even').css('background-color') возвращается текущий цвет

Answer 2

.css() также может использоваться в качестве метода геттера

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

Answer 3

Лучше, если вы используете класс переопределения, а не устанавливаете CSS через JS. Следующий код будет переключать класс для #even и #odd с.в.

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

Используйте CSS классы вместо #IDs. И в jQuery проверьте, присутствует ли класс .odd для элемента. Если так, замените на класс. Наоборот.