1

各 TD に独自のクラスを割り当てる必要がある動的テーブルがあります。以下の例では、このテーブルのすべての TD に .one が適用されています。CSS (または Jquery) だけを使用して、td クラス .two および .three をこのテーブルの 2 番目と 3 番目の子に割り当てることはできますか?

[クラス名を TD に追加しないでください。これは動的テーブルです]

動的- 明確にするために、テーブル内の TD/TR の数は不明です。したがって、CSS は、TD/TR が 3 つであるか、TD/TR が 10 であるかに関係なく、十分に調整できるほどスマートである必要があります。

HTML:

<table id="foo">
  <tr>
   <td>One</td>
  </tr>
  <tr>
   <td>Two</td>
  </tr>
  <tr>
   <td>Three</td>
  </tr>
</table>​

CSS:

 #foo{
   position: absolute;
   display: block;
   background: gray;
   color: white;
   height: 67px;
   width: 500px;
   border: 1px solid black;
}

tr {
   width: 500px;
   border: 1px solid black;
}

.one td {
   background: red;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

.two td {
   background: green;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

ここで JS Fiddle を参照してください: http://jsfiddle.net/bigthyme/kM7H9/

4

1 に答える 1

2

セット内の各要素のインデックスをルックアップとして使用できます。

​var classes = ['one', 'two', 'three'];

$("#foo td").attr("class", function (index, value) {
    return classes[index]; // 0 returns 'one', 1 returns 'two', etc.
});​​​​​​​​​​​​

デモ: http://jsfiddle.net/SzKbh/1/

ただし、これを行う必要はありません。クラスを使用せずにそれらをターゲットにすることができます：

tr:nth-of-type(1) td { color: red }
tr:nth-of-type(2) td { color: green }
tr:nth-of-type(3) td { color: blue }​

デモ: http://jsfiddle.net/SzKbh/

これは、最新のブラウザーでかなり優れたサポートを提供しています。これには、各行の色を明示的に設定する必要があるため、行数を知る必要があります。行数がわからない場合は、より複雑なセレクターを使用できます。

table tr:nth-child(2n+0) { color: red }
table tr:nth-child(2n+1) { color: blue }
table tr:nth-child(3n+0) { color: green }

デモ: http://jsfiddle.net/SzKbh/2/

于 2012-12-11T02:11:39.573 に答える