3

我在为给定表格行中的每个单元格设置 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 将这个类分配给我的特定行。:)

4

3 回答 3

16

为什么你不能设置行的类并相应地调整你的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 {
    ...
}
于 2009-10-20T08:05:22.323 回答
2

@kris，单元格中使用的类对于整个单元格都是通用的。我只需要更新选择性行。所以我不能只更新那个...

看起来你仍然应该使用 CSS 选择器来做你想做的事。也许是这样的：

  #mytable td {
    // 常规 td 样式
  }
  #mytable .special td {
    // 特殊单元格样式
  }


<table id="mytable">
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr class="special">
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
于 2009-10-20T08:14:56.870 回答
0

最初我认为设置父行 CSS 会影响单元格的样式属性，但这不起作用。

我认为，如果您将单元格的某些属性设置为“继承”，它们将从表格行继承这些属性。你试过吗？

于 2009-10-20T08:59:45.280 回答