jquery - jQuery为多组列设置备用颜色

Question

我们可以使用 jQuery 来设置表格行的替代颜色：

$("tr:odd").css("background-color", "white");
$("tr:even").css("background-color", "yellow");

是否可以将此模式用于第一组列，并为第二组或更多组列使用另一种颜色组合？

Answer 1

好的，谢谢提示。以下将起作用。

HTML（由 jQuery 异步附加）：

<table id='dataTable'>
    <tr>
        <td class='td1'>a</td><td class='td2'>b</td><td class='td3'>c</td>
    <tr>
    <tr>
        <td class='td1'>1</td><td class='td2'>2</td><td class='td3'>3</td>
    <tr>
</table>

jQuery（每次添加一行时调用此块）：

$('tr:even td.td1').css("background-color", "#00CCCC");
$('tr:odd td.td1').css("background-color", "#00FFFF");
$('tr:even td.td2').css("background-color", "#00CC33");
$('tr:odd td.td2').css("background-color", "#00FF33");
$('tr:even td.td3').css("background-color", "#99CC33");
$('tr:odd td.td3').css("background-color", "#99FF33");

缺点是每个 'TD' 都需要分配一个 CSS 类，并且每次添加新行时都会调用 CSS 分配。