Question

我必须更改替代行的颜色。 “Green”中的一行，另一行是“Yellow”。

<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

在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 2

是否必须使用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");

Answer 3

如果您需要动态执行此操作，请使用：

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

作为替代方案，您也可以使用：

$(".ms-viewheader").siblings().css("background-color", "green");
$(".ms-alternating").css("background-color", "yellow");

Answer 4

如果您想将ms-viewheader视为与ms-alternating相同：

$('tr:not([class^="ms"])').css('background-color','red');
$('tr[class^="ms"]').css('background-color','blue');

否则，如果您只想跳过ms-viewheader并开始交替所有其他行：

$('tr:not([class^="ms"])').css('background-color','red');
$('tr.ms-alternating').css('background-color','blue');

概念证明：http://jsfiddle.net/daybreaker/J7dVX/

Answer 5

像这样 - 使用模数

for row, i in $('tbody tr')
  color = if i % 2 is 0 then '#ff0000' else '#00ff00'
  $(row).css 'background-color', color

Answer 6

我在最新评论中看到ms-alternating类已经存在于标记中？

如果是这样，您不需要任何jquery或花哨的CSS3规则来执行此操作。你可以用常规的'CSS'做到这一点。

只需将其添加到您的CSS：

tr td {
    background-color:green; /* this colors the whole table green */
}
tr.ms-viewheader td {
    background-color:transparent; /* we don't want the header to get any color, so reset it */
}
tr.ms-alternating td {
    background-color:yellow; /* and finally, color the alternating rows yellow */
}

请注意，这将为页面上的所有表格着色。您可能只想定位一个表。所以你需要一些更具体的选择器。您想要着色的表格上是否有您可以定位的ID或类？

祝你好运！

Answer 7

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

$("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/

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

7 个答案: