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

如果你使用重写类而不是通过JS本身设置CSS，它会更好。以下代码将切换#even和#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 2

$('table #even').css('background-color')返回当前颜色

Answer 3

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

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

Answer 4

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

JQuery Swap表格单元格的颜色

4 个答案: