0

<tr class="dynamicCSS">タグ用に 3 つの定義済みクラスがあります。それらのクラスは次々と来るでしょう。お気に入り -

<tr>
   <td></td>
</tr>
<tr class="dynamicCSS"> //classA
   <td></td>
</tr>
<tr class="dynamicCSS"> //classB
  <td></td>
</tr>
<tr class="dynamicCSS"> //classC
   <td></td>
</tr>
<tr class="dynamicCSS"> //repeat the above 
    <td></td>
</tr>

どうすればできますか？

4

3 に答える 3

1

クラスを追加する行を特定する何らかの方法が必要です。(質問のように同じ値を何度も使用することはできないため、機能しませんが、異なるid値を与えることはできます。) id

tr問題の要素を特定する方法が分かったら、あとclassNameはそれらの要素のプロパティを設定するだけです。

たとえば、あなたの例では、テーブルの 2 番目、3 番目、4 番目の行を特定しました。テーブルに があると仮定すると、そのプロパティid "myTable"からテーブルの行を取得できます。rowsHTMLCollection0

var table = document.getElementById("myTable");
table.rows[1].className = "classA"; // second row
table.rows[2].className = "classB"; // third row
table.rows[3].className = "classC"; // fourth row

これにより、行が持っていた以前のクラスがすべて消去されることに注意してください。クラスを追加する場合は、次を使用します+= " classX"(スペースに注意してください)。

var table = document.getElementById("myTable");
table.rows[1].className += " classA"; // second row
table.rows[2].className += " classB"; // third row
table.rows[3].className += " classC"; // fourth row

上記では、ほぼすべてのブラウザー (古いブラウザーも含む) に存在する DOM 関数に限定しました。およびコレクションではなく、すべての主要な現在のブラウザーで、クラスを追加する行を識別する有効な CSS セレクター式を使用できます。説明したことには必ずしも必要ではありませんが、それについて知っておくとよいでしょう (および、一致する要素のリストを返すのに対し、最初の一致する要素だけを返すその従兄弟)。getElementByIdrowsquerySelectorquerySelectorAllquerySelector

于 2013-11-10T14:25:53.247 に答える
1

たぶん、nth:child css セレクターを探しているかもしれません *1

あなたの例では、ここでそれをいじることができます: http://jsfiddle.net/95N4E/

.myTable tr:nth-child(3n+1) {
    background-color: gray;
}
.myTable tr:nth-child(3n+2) {
    background-color: limegreen;
}
.myTable tr:nth-child(3n+3) {
    background-color: steelblue;
}

そして、それがどのように機能するかをここで読んでください：

※1 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

于 2013-11-10T14:31:41.317 に答える
0

クラスを tr 要素に追加する簡単な方法は、jQuery.addClass()を使用することです。

jQuery("tr").addClass("myClass");

jQuery 呼び出しに渡されるセレクターは、n 番目の childrenを選択することもできます。たとえば、3 つおきのtr要素にクラスを追加します。

jQuery("tr:nth-child(3n)").addClass("classC");
于 2013-11-10T14:17:26.620 に答える