Was ist ein effizienter Weg, um CSS-Klassen für jede Zelle in einer bestimmten Tabellenzeile festzulegen?

Question

Ich habe ein Problem bei der Einstellung der CSS-Klasse für jede Zelle in einer bestimmten Tabellenzeile. Ursprünglich dachte ich, dass die Einstellung des CSS der übergeordneten Zeile die Stileigenschaften der Zellen beeinflussen würde, aber das funktioniert nicht. Stattdessen muss ich eine Schleife durch alle Zellen in einer bestimmten Zeile ziehen, um die CSS-Klasse zu aktualisieren.

Dies ist jedoch nicht effizient. Und es hat eine Menge Zeit gekostet. Betrachten Sie meine Situation: Ich habe etwa 230 Zeilen, in denen jede Zeile 23 Zellen hat (insgesamt 5290 Zellen).

注意してください： Ich benutze keine Frameworks. so bitte können Sie einen Ansatz in native JS vorschlagen?

UPDATE :

es funktioniert gut mit der Empfehlung von Paolo

Ursprünglich war meine benutzerdefinierte css-Klasse wie folgt

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

Und ich habe dies geändert in

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 }

Und ich habe diese Klasse mit Hilfe von Javascript meinen spezifischen Zeilen zugewiesen:)

Answer 1

Warum können Sie nicht die Klasse der Zeile festlegen und Ihr CSS entsprechend anpassen?

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

Dann in CSS:

tr.myclass td {
    ...
}

In jedem Fall, vorausgesetzt, die Tabelle hat die ID "mytable", können Sie allen Tabellenzeilen die gewünschte Klasse zuweisen, etwa so:

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

Wenn Sie dies für die gesamte Tabelle tun, können Sie auch einfach dem Tabellen-Tag selbst eine Klasse zuweisen und es dann tun:

table.myclass tr td {
    ...
}

Answer 2

@kris, die Klassen, die in Zellen verwendet werden, sind für ganze Zellen gemeinsam... ich muss nur die selektiven Zeilen aktualisieren... ich kann also nicht einfach aktualisieren, dass...

Es scheint immer noch, dass Sie CSS-Selektoren verwenden sollten, um zu tun, was Sie wollen. Vielleicht so etwas wie dieses:

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

Answer 3

Ursprünglich dachte ich, die Einstellung Zeile würde sich auf die Stileigenschaften Eigenschaften der Zellen beeinflussen, aber das funktioniert nicht.

Ich denke, wenn Sie einige der Eigenschaften Ihrer Zelle auf "erben" setzen, werden sie diese Eigenschaften von der Tabellenzeile erben. Haben Sie das schon ausprobiert?