0

我有三个预定义的<tr class="dynamicCSS">标签类。这些课程将一个接一个地来。喜欢 -

<tr>
   <td></td>
</tr>
<tr class="dynamicCSS"> //classA
   <td></td>
</tr>
<tr class="dynamicCSS"> //classB
  <td></td>
</tr>
<tr class="dynamicCSS"> //classC
   <td></td>
</tr>
<tr class="dynamicCSS"> //repeat the above 
    <td></td>
</tr>

我该怎么做？

4

3 回答 3

1

您需要某种方法来识别要添加类的行。（你不能id像在你的问题中那样一遍又一遍地使用相同的值，所以这是行不通的，但你可以给它们不同的 id值。）

一旦您有了一种方法来识别有tr问题的元素，只需设置className这些元素的属性即可。

例如，在您的示例中，您已经确定了表中的第二、第三和第四行。假设表具有id "myTable"，您可以从其rows属性中获取表的行，这是HTMLCollection您可以从以下开始索引的0：

var table = document.getElementById("myTable");
table.rows[1].className = "classA"; // second row
table.rows[2].className = "classB"; // third row
table.rows[3].className = "classC"; // fourth row

请注意，这将清除行之前的任何类。如果要添加类，请使用+= " classX"（注意空格）：

var table = document.getElementById("myTable");
table.rows[1].className += " classA"; // second row
table.rows[2].className += " classB"; // third row
table.rows[3].className += " classC"; // fourth row

在上面，我将自己限制在几乎所有浏览器中都存在的 DOM 函数，甚至是较旧的浏览器。在所有主要的当前浏览器上，而不是getElementById和rows集合上，您可以使用querySelector任何有效的 CSS 选择器表达式来标识您想要添加类的行。对于您所描述的内容，您不一定需要它，但最好了解它（以及它的表亲querySelectorAll，它返回匹配元素的列表，而querySelector只返回第一个匹配元素）。

于 2013-11-10T14:25:53.247 回答
1

也许您正在寻找 nth:child css 选择器 *1

对于你的例子，你可以在这里摆弄它：http: //jsfiddle.net/95N4E/

.myTable tr:nth-child(3n+1) {
    background-color: gray;
}
.myTable tr:nth-child(3n+2) {
    background-color: limegreen;
}
.myTable tr:nth-child(3n+3) {
    background-color: steelblue;
}

并在这里阅读它是如何工作的：

*1 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

于 2013-11-10T14:31:41.317 回答
0

将类添加到 tr 元素的一种简单方法是使用jQuery.addClass()：

jQuery("tr").addClass("myClass");

传递给 jQuery 调用的选择器也可以选择 nth children，例如为每三个tr元素添加一个类：

jQuery("tr:nth-child(3n)").addClass("classC");
于 2013-11-10T14:17:26.620 回答