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

发布于 2024-08-08 11:59:19 字数 977 浏览 8 评论 0原文

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

I have a problem setting the CSS class for each cell in a given table row. Initially I thought setting the parent row CSS would affect the style properties of cells,
but that doesn't work. Instead I have to loop through all the cells in a given row to updated the CSS class.

However this is not efficient. And it took a lot of time. Consider my situation: I have around 230 rows in which each row has 23 cells (totally 5290 cells).

Note: I don't use any frameworks. so please can you suggest an approach in native JS?

UPDATE :

its working fine using the Paolo's recommendation..

Initially my custom css class is been like this

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

And i changed this to

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 }

And i assigned this class to my specific rows using javascript. :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

拥抱影子 2024-08-15 11:59:19

为什么你不能设置行的类并相应地调整你的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 {
    ...
}

Why can't you set the class of the row and adjust your css accordingly?

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

Then in CSS:

tr.myclass td {
    ...
}

In either case, assuming the table has an id of "mytable" you could give all the table rows the class you want like so:

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

If you're doing this to the whole table, though, you might as well just give a class to the table tag itself then do:

table.myclass tr td {
    ...
}
甜警司 2024-08-15 11:59:19

@kris,单元格中使用的类对于整个单元格是通用的..我只需要更新选定的行..所以我不能只更新它...

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

  #mytable td {
    // regular td style
  }
  #mytable .special td {
    // special cell style
  }

<table id="mytable">
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr class="special">
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

@kris, the classes used in cells are common for entire cells.. i need to update only the selective rows.. so i cant just update that...

It still seems like you should be using CSS selectors to do what you want. Maybe something like this:

  #mytable td {
    // regular td style
  }
  #mytable .special td {
    // special cell style
  }

<table id="mytable">
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr class="special">
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>
一百个冬季 2024-08-15 11:59:19

最初我想设置父级
row CSS 会影响样式
细胞的特性,但事实并非如此
工作。

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

Initially I thought setting the parent
row CSS would affect the style
properties of cells, but that doesn't
work.

I think that if you set some of your cell's properties to "inherit" they will inherit those properties from the table row. Have you tried that?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文