Question

<table>
    <thead>
        <tr>
            <td>sf</td>
        </tr>
        <tr>
            <td>sf</td>
        </tr>
        <tr>
            <td>sf</td>
        </tr>
        <tr>
            <td>sf</td>
        </tr>
    </thead>
</table>


.red {
  background-color: red;
}
.green {
  background-color: green;
}

如何使用jQuery自动为TR添加红色和绿色类？

直播示例： http://jsfiddle.net/2Htwx/

Answer 1

$('tr:odd').addClass('red');
$('tr:even').addClass('green');

假设你想要每隔一行红色或绿色，按照你的JS小提琴。请注意，这是在每个表中，因此您不会在所有表行中看到红色/绿色/红色。

如果你想要，试试这个：

var oddFilter = function(index) {
     console.log(index);
  return (index % 2) == 1;
},
 evenFilter = function(index) {
     console.log(index);
  return (index % 2) == 0;
}

$('tr').filter(oddFilter).addClass('red').end()
       .filter(evenFilter).addClass('green');

请注意，<thead>，<tfoot>等仍然会弄乱显示，因为这会在显示屏周围移动行。

Answer 2

您不需要JavaScript来完成这种“表格条带化”效果。使用CSS nth-child选择器就可以了解

thead tr {
    background: green; /* Set all tr elements to green */
}

thead tr:nth-child(even) {
    background: red; /* Override the colour for just the even ones */
}

注意：旧版浏览器不支持此选择器。 IE8及以下。

进一步阅读CSS nth-child：

http://css-tricks.com/how-nth-child-works/

Answer 3

你的意思是这样吗？

$(document).ready(function() {
     var class = "";
     $("tr").each(function(idx, elem) {
        class = (idx % 2 == 0)?"red":"green";
        $(elem).addClass(class);
     });
});

Answer 4

你能解释一下“自动”吗？你的意思是页面就绪事件？

也许是这样的事：

$(document).ready(function (){
    $("tr:odd").css("background-color", "#f00");
    $("tr:even").css("background-color", "#0f0");
});

Answer 5

试试这个

var trs = jQuery('tr');
trs.filter(':even').addClass('red');
trs.filter(':odd').addClass('green');

不要每次选择两次

Answer 6

这是最简单的方法：

$("tr").addClass("red");

使用jQuery自动添加类

6 个答案: