3

特定のテーブル行の各セルに CSS クラスを設定する際に問題があります。最初は、親行の CSS を設定するとセルのスタイル プロパティに影響すると思っていましたが、うまくいきません。代わりに、特定の行のすべてのセルをループして、CSS クラスを更新する必要があります。

ただし、これは効率的ではありません。そして、それには多くの時間がかかりました。私の状況を考えてみましょう: 各行に 23 個のセル (合計 5290 個のセル) がある約 230 行あります。

注:フレームワークは使用しません。ネイティブJSでのアプローチを提案してください。

アップデート ：

パオロの推奨事項を使用して正常に動作しています..

最初、私のカスタム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 に答える