0

奇数と偶数を使用して、テーブル内の行を交互に色付けできることを知っています。ただし、 3行ごとに色付けできるようにしたいので、色付けはred-green-blue-red-green-blue のようになります。

さらに、それを一般化し、 n色を使用して n:th 行ごとにスタイルを設定したいと思います。

現時点では、テーブルを動的に生成し、反復ごとに、すべてのtdタグにmodulo0、modulo1などのクラス名を付けています。

より良い方法はありますか？つまり、より自動的なものです。

4

3 に答える 3

5

:nth-childでセレクターを使用したい場合、3nここに数値を追加して、開始、秒、または 3 番目から始まるすべての秒を取得できます。

jsフィドル

色が交互に並ぶテーブル

HTML

<table>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
    <tr><td>R</td></tr>
    <tr><td>G</td></tr>
    <tr><td>B</td></tr>
</table>

CSS

tr:nth-child(3n+1) td { 
    background-color:red;
}
tr:nth-child(3n+2) td { 
    background-color:green;
}
tr:nth-child(3n) td { 
    background-color:blue;
}

一般的

より一般的には3、色を変更する行数に置き換えます。

tr:nth-child(2n) td { } /* every second row */
tr:nth-child(4n) td { } /* every fourth row */
tr:nth-child(10n) td { } /* every tenth row */

サポート

CSS3 セレクターの完全なサポートは、IE9 でのみ提供されることに注意してください。IE8 のサポートが不可欠な場合は、手動クラスや JavaScript などの代替ソリューションが必要です。

于 2013-03-21T09:09:34.980 に答える
1

を使用するだけnth-child(3n+3)です。これはクロスブラウザー ソリューションではないことに注意してください。これが実際の例です

于 2013-03-21T09:14:08.060 に答える
0

古い方法かもしれませんが、javascriptに問題がなければ、以下も試すことができます。

<body>
    <script language="JavaScript" type="text/javascript">

    function altrows(tableid,firstcolor,secondcolor,thirdcolor)
    {
          var rows = document.getElementById(tableid).getElementsByTagName("tr");

      for(var i = 0; i < rows.length; i++)
      {
        i -= 1;

        for (var b=0;b<=2;b++) { 
            i +=1; 
            if(b==0){ rows[i].bgColor = firstcolor; }
            if(b==1){ rows[i].bgColor = secondcolor; }  
            if(b==2){ rows[i].bgColor = thirdcolor; }       
            }
        }
    }
    </script>


<body onLoad="altrows('tb_detail','#FF0321','#44FF03','#2103FF')">

<table cellpadding="0" cellspacing="0" border="0" width="90%" id="tb_detail">   
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
<tr><td>Item1</td></tr>         
</table>
</body>
于 2013-03-21T10:44:45.577 に答える