Question

我有<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>

我该怎么做？

Answer 1

您需要某种方法来识别要添加类的行。（您不能像在问题中一样反复使用相同的id值，因此无效，但您可以为他们提供不同的 id值。）

如果您有办法识别有问题的tr元素，只需设置这些元素的className属性即可。

例如，在您的示例中，您已确定表中的第二行，第三行和第四行。假设该表格中包含id "myTable"，您可以从rows property获取表格的行，这是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函数，甚至更旧的浏览器。在all major current browsers上，而不是getElementById和rows集合，您可以将querySelector与任何有效的CSS选择器表达式一起使用，该表达式将标识要添加类的行。对于你所描述的内容，你不一定需要它，但是了解它（以及它的堂兄querySelectorAll，它会返回一个匹配元素列表，而querySelector只返回第一个）匹配元素）。

Answer 2

也许您正在寻找第n个：子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

Answer 3

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

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

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

jQuery("tr:nth-child(3n)").addClass("classC");

动态地将css类添加到标记

3 个答案: