I have designed a table cell in the following way
<tr>
<td id = 'even'>row 8, cell 1</td>
<td id = 'odd'>row 8, cell 2</td>
</tr>
The colors and font sizes are defined using the CSS below
#even { font-size : 10pt; color : red; background-color:yellow; }
#odd { font-size : 20pt; color : white; background-color:green; }
Now I would like to interchange the color of even and odd cells by clicking a button
<button id='swapcolor' type="button" >Swap Colors</button>
The font size should also switch.
I have attempted to accomplish this in the following manner
$("#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");
});
My issue lies in figuring out how to capture the current color of the cell
Thank you in advance for any assistance