为给定表行中的每个单元格设置CSS类的有效方法是什么? [英] What is an efficient way to set CSS class for each cell in a given table row?

问题描述

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

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.

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

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

注意:我不使用任何框架.所以请您建议使用原生JS的方法吗?

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

更新:

使用Paolo的建议可以正常工作.

its working fine using the Paolo's recommendation..

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

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 }

我将其更改为

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将此类分配给了我的特定行.:)

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

推荐答案

为什么不能设置行的类并相应地调整CSS?

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

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

然后使用CSS:

tr.myclass td {
    ...
}

在任何一种情况下，假设表的ID为"mytable"，则可以为表的所有行赋予所需的类，如下所示:

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

这篇关于为给定表行中的每个单元格设置CSS类的有效方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！