是否使用jquery更改表的替代行颜色？

Question

我必须更改替代行的颜色。“绿色”中的一行和“黄色”中的另一行。

<tr class="ms-viewheader" vAlign="top">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">
<tr class="">
<tr class="ms-alternating">

我必须跳过"ms-viewheader“行，并开始给下一个同级代码着色。整行应该是彩色的。

该怎么做呢？

Answer 1

好的，所以你只想处理这一张表。试试这个：

$("table[class='ms-listviewtable'] tr[class='']").css("background-color","yellow");
$("table[class='ms-listviewtable'] tr:.ms-alternating").css("background-color","green")

我假设该表有一个类，否则您可以向它添加一个类来区分它。

演示：http://jsfiddle.net/J7dVX/13/

Answer 2

在javascript中运行类似这样的代码

// define the background color for even and odd rows
var bgColors = {
  even: '#eaeaea',
  odd:  '#aeaeae'
};
$("table tr:not(.ms-viewheader):even").css({"backgroundColor":bgColors.even});
$("table tr:not(.ms-viewheader):odd").css({"backgroundColor":bgColors.odd});

Answer 3

一定要用JS吗？这是一个CSS解决方案。http://jsfiddle.net/HvLRs/1/

CSS：

tr:nth-child(2n) {  
   background-color:green;
} 
tr:nth-child(4n) {  
   background-color:yellow;
} 

HTML：

<table id="alternating">
    <th class="ms-viewheader" vAlign="top"><td>Header</td></th>
    <tr class=""><td>1</td></tr>
    <tr class="ms-alternating"><td>2</td></tr>
    <tr class=""><td>3</td></tr>
    <tr class="ms-alternating"><td>4</td></tr>
    <tr class=""><td>5</td></tr>
    <tr class="ms-alternating"><td>6</td></tr>
    <tr class=""><td>7</td></tr>
    <tr class="ms-alternating"><td>8</td></tr>
</table>

如果必须使用jQuery，我修改了Teddy的代码：http://jsfiddle.net/HvLRs/3/

$("table tr:.ms-alternating:even").css("background-color","yellow");
$("table tr:.ms-alternating:odd").css("background-color","green");