THE HAM MEDIA BLOG

テーブルで簡単かつ綺麗に格子状に色分けする方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
javascript
jquery
テーブル
TABLE

綺麗に格子状に色分けする方法

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

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



今回使うHTML

■HTMLソース(列が奇数の場合)

<table>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
        <td>セル4</td>
        <td>セル5</td>
    </tr>
    <tr>
        <td>セル6</td>
        <td>セル7</td>
        <td>セル8</td>
        <td>セル9</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>

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

セル1 セル2 セル3 セル4 セル5
セル6 セル7 セル8 セル9 セル10
セル11 セル12 セル13 セル14 セル15
セル16 セル17 セル18 セル19 セル20
セル21 セル22 セル23 セル24 セル25

■HTMLソース(列が偶数の場合)

<table>
    <tr>
        <td>セル1</td>
        <td>セル2</td>
        <td>セル3</td>
        <td>セル4</td>
        <td>セル5</td>
        <td>セル6</td>
    </tr>
    <tr>
        <td>セル7</td>
        <td>セル8</td>
        <td>セル9</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>

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

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

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

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

■設定ソース

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

■プレビュー

セル1 セル2 セル3 セル4 セル5
セル6 セル7 セル8 セル9 セル10
セル11 セル12 セル13 セル14 セル15
セル16 セル17 セル18 セル19 セル20
セル21 セル22 セル23 セル24 セル25

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

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

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

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

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

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

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

■設定ソース

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

■プレビュー

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

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

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

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

セル1 セル2 セル3 セル4 セル5
セル6 セル7 セル8 セル9 セル10
セル11 セル12 セル13 セル14 セル15
セル16 セル17 セル18 セル19 セル20
セル21 セル22 セル23 セル24 セル25

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

「: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>

■プレビュー(列が奇数)

セル1 セル2 セル3 セル4 セル5
セル6 セル7 セル8 セル9 セル10
セル11 セル12 セル13 セル14 セル15
セル16 セル17 セル18 セル19 セル20
セル21 セル22 セル23 セル24 セル25

■プレビュー(列が偶数)

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

「: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>

■プレビュー(行ごと)

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

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

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

■設定ソース(行ごと)

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

■プレビュー(行ごと)

セル1 セル2 セル3 セル4 セル5 セル6
セル7 セル8 セル9 セル10 セル11 セル12
セル13 セル14 セル15 セル16 セル17 セル18
セル19 セル20 セル21 セル22 セル23 セル24
セル25 セル26 セル27 セル28 セル29 セル30
セル31 セル32 セル33 セル34 セル35 セル36

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。