THE HAM MEDIA BLOG

昨日は「リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法」
というのをエントリーしましたが、今日はそのテーブル版

昨日の方法だと、縦か横のどちらかでしか色分けできなかったのですが、
今回紹介するのは、格子状（隣り合うセルが違う色）にする方法です。

今回使うHTML

■HTMLソース（列が奇数の場合）

<table>
    <tr>
        <td>セル１</td>
        <td>セル２</td>
        <td>セル３</td>
        <td>セル４</td>
        <td>セル５</td>
    </tr>
    <tr>
        <td>セル６</td>
        <td>セル７</td>
        <td>セル８</td>
        <td>セル９</td>
        <td>セル10</td>
    </tr>
    <tr>
        <td>セル11</td>
        <td>セル12</td>
        <td>セル13</td>
        <td>セル14</td>
        <td>セル15</td>
    </tr>
    <tr>
        <td>セル16</td>
        <td>セル17</td>
        <td>セル18</td>
        <td>セル19</td>
        <td>セル20</td>
    </tr>
    <tr>
        <td>セル21</td>
        <td>セル22</td>
        <td>セル23</td>
        <td>セル24</td>
        <td>セル25</td>
    </tr>
</table>

■今回のサンプルプレビュー（列が奇数）

■HTMLソース（列が偶数の場合）

<table>
    <tr>
        <td>セル１</td>
        <td>セル２</td>
        <td>セル３</td>
        <td>セル４</td>
        <td>セル５</td>
        <td>セル６</td>
    </tr>
    <tr>
        <td>セル７</td>
        <td>セル８</td>
        <td>セル９</td>
        <td>セル10</td>
        <td>セル11</td>
        <td>セル12</td>
    </tr>
    <tr>
        <td>セル13</td>
        <td>セル14</td>
        <td>セル15</td>
        <td>セル16</td>
        <td>セル17</td>
        <td>セル18</td>
    </tr>
    <tr>
        <td>セル19</td>
        <td>セル20</td>
        <td>セル21</td>
        <td>セル22</td>
        <td>セル23</td>
        <td>セル24</td>
    </tr>
    <tr>
        <td>セル25</td>
        <td>セル26</td>
        <td>セル27</td>
        <td>セル28</td>
        <td>セル28</td>
        <td>セル30</td>
    </tr>
    <tr>
        <td>セル31</td>
        <td>セル32</td>
        <td>セル33</td>
        <td>セル34</td>
        <td>セル35</td>
        <td>セル36</td>
    </tr>
</table>

■今回のサンプルプレビュー（列が偶数）

格子状に色分けする方法（列が奇数の場合）

ここからが本題。
前回のリストで使った方法と同じようにすると、
簡単に格子状に色分けすることができる。

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("td:even").css("background-color","#7fbfff");
});
</script>

■プレビュー

列（縦）が偶数の場合ものすごく簡単なソースでできたことがわかると思います。
色の付け方を逆にしたい場合は、evenをoddに変えるだけでできます。

しかし、今回の方法では、
列が偶数の場合に同じソースで書くと以下のようになってしまいます。

■プレビュー(同じソースで列が偶数)

セルの番号を見たらわかると思うのですが、
全体を通した数のうち、奇数番号セルだけに適応されています。

そこで、列が偶数の場合は以下のように設定することで交互になります。

格子状に色分けする方法（列が偶数の場合）

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("tr:even td:even , tr:odd td:odd")
        .css("background-color","#7fbfff");
});
</script>

■プレビュー

列が奇数の場合でも、行が奇数の時は列も奇数のセルを、
行が偶数の時は列も偶数のセルを設定するようにすれば格子状になる。

しかし、上記の方法を列が奇数の時に使うと、これまたずれてしまう。

■プレビュー(同じソースで列が奇数)

どちらの方法でも気をつけて設定しないといけない。

「:odd」も「:even」もどちらも全体を通しての偶数と奇数になるから、
今までの方法では、列が偶数なのか奇数なのか考えなくてはならない。

では、列が奇数偶数どちらかに関わらず、万能に設定できる方法はないのか？

ちょっと考えたが、以下の方法ならいけるはず！

格子状に色分けする方法(列の数に関係なく対応させる方法)

■設定ソース

<script type="text/javascript">
$(document).ready(function(){
    $("tr:nth-child(odd) td:nth-child(odd) ,
         tr:nth-child(even) td:nth-child(even)")
            .css("background-color","#7fbfff");
});
</script>

■プレビュー（列が奇数）

■プレビュー（列が偶数）

「:odd(even)」が全体を通しての奇数と偶数だったのに対し、
:nth-child(odd(even))は部分部分でみるのではないか？
と考えたので試してみたが、案の定うまくいった。

使う好みにもよると思うが、:nth-child()を使う方が楽そうだ。

おまけ：列ごとに色分けする方法

最後におまけとして行・列ごとに色分けする方法を載せておく

■設定ソース（行ごと）

<script type="text/javascript">
$(document).ready(function(){
    $("tr:nth-child(odd) td").css("background-color","#7fbfff");
});
</script>

■プレビュー（行ごと）

先ほどのソースから少し抜いただけでこれができる。

ちなみに列でそろえたいのならば以下のようにすればよい。

■設定ソース（行ごと）

<script type="text/javascript">
$(document).ready(function(){
    $("td:nth-child(odd)").css("background-color","#7fbfff");
});
</script>

■プレビュー（行ごと）

今後テーブルを使うような場合に使ってみてください。