javascript - 为给定表格行中的每个单元格设置 CSS 类的有效方法是什么？

Question

我在为给定表格行中的每个单元格设置 CSS 类时遇到问题。最初我认为设置父行 CSS 会影响单元格的样式属性，
但这不起作用。相反，我必须遍历给定行中的所有单元格以更新 CSS 类。

然而，这效率不高。这花了很多时间。考虑我的情况:我有大约 230 行，其中每行有 23 个单元格(总共 5290 个单元格)。

注:我不使用任何框架。所以请你建议一种原生 JS 的方法吗？

更新:

使用 Paolo 的推荐，它工作正常。

最初我的自定义 css 类是这样的

.Grid_RowItalicsBold { PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }

我把这个改成

tr.Grid_RowItalicsBold td{ PADDING-RIGHT: 5px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; OVERFLOW: hidden; COLOR: Black; LINE-HEIGHT: 15pt; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap; BACKGROUND-COLOR: yellow; TEXT-DECORATION: none }

我使用javascript将这个类分配给我的特定行。 :)

Answer 1

为什么你不能设置行的类并相应地调整你的css？

<tr class="myclass">
   <td>...</td>
   <td>...</td>
</tr>

然后在 CSS 中:

tr.myclass td {
    ...
}

在任何一种情况下，假设表的 id 为“mytable”，您可以为所有表行提供您想要的类，如下所示:

var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
    rows[x].className = rows[x].className + " myclass";
}

但是，如果您要对整个表执行此操作，则最好为表标记本身提供一个类，然后执行以下操作:

table.myclass tr td {
    ...
}