使用jQuery更改表格交替行的颜色？

Question

使用jQuery更改表格交替行的颜色？

6

我需要为交替行更改颜色。一行为“绿色”，另一行为“黄色”。

<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”行并开始为下一个兄弟元素着色。整行都应该是彩色的。

如何实现这个功能？

- James123

“Out of the box feature” 是什么意思？ - Omer Tuchfeld

@OmerPT：这是SharePoint列表。我正在尝试更改列表中的颜色。 - James123

ms-alternating 已经存在还是需要添加它？ - melhosseiny

@melhosseiny：已经有了给出的代码。我需要jQuery代码并添加颜色。 - James123

如果在标记中已经有了“ms-alternating”类，那么您不需要任何jquery来完成您所要求的操作。请查看我刚添加的答案。 - Funka

显示剩余2条评论

7个回答

0

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

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

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

Demo: http://jsfiddle.net/J7dVX/13/

- markoo

0

需要使用 JavaScript 吗？这里有一个 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");

- ngen

我没有看到任何有关<tr class=""><td>1</td></tr>的着色。 - James123

啥？第一个链接没有设置内联样式，它使用了 CSS。但第二个链接应该设置内联样式。你用的是什么浏览器？ - ngen

我喜欢这个答案。这应该完全可以在CSS中完成，而不需要任何javascript。（但是，我认为OP想要2n和2n+1，而不是2n和4n。）当然，尽管我喜欢说“请在CSS中完成，而不是javascript”，但问题是可怜的IE8不支持这一点，所以可能使用javascript更有吸引力。 - Funka

0

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

$("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");

- melhosseiny

<tr class=""> 颜色方面怎么处理？ - James123

来吧，这会在每个 tr 处搞乱整个页面。我必须使用 <th class="ms-viewheader"> 然后移动到下一个兄弟节点来为 <tr> 上色。你的 $("tr").css("background-color", "blue"); 会将颜色应用于所有的 <tr>。 - James123

0

如果你想把 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/

- daybreaker

[class^="ms"] 在页面的其他位置。因此它适用于所有位置。 - James123

詹姆斯：在你的选择器中使用限制器。表格有类别或ID吗？$('table#thatoneannoyingtable tr:not([class^="ms"])')等等... - Elf Sternberg

0

类似这样 - 使用取模运算

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

- mch_dk

0

我在你对原问题的最新评论中看到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或类可以针对？祝你好运！

- Funka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teddy · Accepted Answer

在 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});