カテゴリー：jQuery

概要

表を組む時に、見やすさを保つため隔行で色を変えたりすることがあります。
手動でやった場合、作業そのものが時間の無駄だし、ツールを使っても一々メンテナンスが大変です。

そこで、それをjQueryを使って自動化するスクリプトを作ってみました。
色を変えたいテーブルにclass="changeTr"と書けば、その表の行を一個飛ばしで色を変えます（正確にはclass="changeTrBg"をつけていく）。

trの中にあるのがtdであろうがthであろうが、ただ単にclass="changeTrBg"をtrにつけていくだけなので、CSSはちゃんと考えて書かないと予想外の表示になってしまうかもしません。

次のサンプルは、二つめの表以外にclassをつけてあります。

いきなり追記

なんだか無駄なことをやっていた（各々のテーブルに含まれるtrの数を勘定して、偶数番めかどうかをチェックして、偶数ならclassを付与する）みたいで、更に簡単に「奇数」「偶数」番目を指定する方法があることを知りました。

Custom Selectorにある「:odd」「:even」というのがそうです。他にも色々便利そうなのがありますね。
ラクをするためにjQueryを使っているので、徹底的に楽しなきゃ…出来ないと思ってることも、ちゃんとドキュメントを読めばラクにできる方法があるかも？

Emotional Webを参考にさせてもらいました。

ただ、短い方だと、下のサンプルのような奇数行のテーブルが列んだ場合、class="changeTr"のついたテーブルをひとまとめにしてtrを勘定するのか、奇数行のテーブルが続くと、色が変わる行がずれていきます（最初のテーブルはthの次の行が色代わり、次のテーブルはthの次の行の色変わらず…の繰り返しになる）。
これを:evenを使ってうまく回避する方法はないものでしょうか。

以下のサンプルは、冗長な方を使っています。

スクリプト

//短い方
$(document).ready(function() {
 $(".changeTr tr:even").addClass("changeTrBg");
});

//長い方
$(document).ready(function() {
 $(".changeTr").each(function() {
  trs = $(this).children();
  $(trs).find("tr:even").addClass("changeTrBg");
 });
});

サンプルCSS

table {
 border-top: 1px solid #ccc;
 border-right: 1px solid #999;
 border-collapse: collapse;
}
td,
th {
 border-left: 1px solid #666;
 border-bottom: 1px solid #333;
 margin: 0;
 padding: 2px 4px;
}
th {
 background-color: #333;
 color: #fff;
 text-align: center;
}
td {
 text-align: right;
}
tr.changeTrBg td {
 background-color: #ddd;
}