JQuery交换表单元格的颜色

我创建了一个表格单元格，如下所示

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

现在我想在单击按钮时交换偶数和奇数单元格的颜色

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

我的问题是如何捕捉单元格的当前颜色

提前感谢您的帮助。

$（'table#event'）。css（'background-color'）

返回当前颜色。

.css（）也可以用作getter方法

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

---

如果使用重写类，而不是通过JS本身设置CSS，那么效果会更好。以下代码将切换

#偶数

和

#奇数

tds的类

CSS

jQUERY

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

---

使用CSS类而不是#ID。在jQuery中，检查元素是否存在.odd类。如果是这样，则替换为。即使是类，反之亦然。

我认为在单击不同的element@TejasvaDhyani我修正了答案。谢谢你指出这一点

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

 #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; }

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