Javascript 将css类动态添加到<；tr>；标签

我为

标记预定义了三个类。这些课程将接踵而至。像-

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

//甲级
//B类
//C类
//重复上述步骤

---

如何操作？

向tr元素添加类的简单方法是：

传递到jQuery调用中的选择器还可以，例如，向每三个

tr

元素添加一个类：

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

---

您需要某种方法来标识要向其中添加类的行。（您不能像在问题中一样反复使用相同的

id

值，因此这不起作用，但您可以给它们不同的

id

值。）

一旦您有了一种识别所讨论的

tr

元素的方法，只需设置这些元素的

className

属性即可

例如，在您的示例中，您已经标识了表中的第二行、第三行和第四行。假设该表具有

id

“myTable”

，则可以从其中获取该表的行，这是一个可以从

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”

（注意空格）：

---

在上面的文章中，我将自己局限于几乎所有浏览器中都存在的DOM函数，即使是较旧的浏览器。在上，而不是使用

getElementById

和

rows

集合，您可以将

querySelector

与任何有效的CSS选择器表达式一起使用，该表达式将标识要向其中添加类的行。对于您所描述的内容，您不一定需要它，但了解它（以及它的表亲

querySelectorAll

，它返回匹配元素的列表，而

querySelector

只返回第一个匹配元素）是件好事。

也许您正在寻找第n个：子css选择器*1

对于您的示例，您可以在此处进行处理：

在这里阅读它的工作原理：

---

*1

id是唯一的，您应该改用类。我的问题已经更新。如果我想将其用于特定的表？@SKPaul：如果您已经有了对表元素的引用，您可以使用：

jQuery（table）。find（“tr”）

，或者如果它有id，您可以直接使用id选择器：

jQuery(“#myTable tr”）

。如果你没有听说过jQuery，我绝对建议你去看看它这样的库，因为它可以让添加和删除类这样的重复操作变得更清晰，更不容易出错。我使用的方法如下。可以吗？$（#distsummy tr:nth child（3n+3））.addClass（“成功”）$（#distsummy tr:nth child（3n+2）.addClass（“信息”）$（“#distsummery tr:nth child（3n+1）”）.addClass（“error”）；看起来很好、很好、很简洁。我建议的主要困难是它不能很好地处理嵌套表，也不能动态更新表。（您可以使用子选择器来解决嵌套表的问题，但要注意

tbody

元素可能会直接指向表的子元素。）如果您可以不使用css，angabriel的答案值得一试。

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

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

.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;
}