隔行でテーブルの行のスタイルを変えるjQueryスクリプト

カテゴリー: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を使ってうまく回避する方法はないものでしょうか。

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

  平成18年 平成17年 対前年増減
出生 1092662 1062530 30132
死亡 1084488 1083796 692
乳児死亡 2863 2958 △95
新生児死亡 1444 1510 △66
自然増加 8174 △21266 29440
死産 30912 31818 △906
自然死産 13419 13502 △83
人工死産 17493 18316 △823
周産期死亡 5096 5149 △53
妊娠満22週 4043 4058 △15
以後の死産      
早期新生児 1053 1091 △38
婚姻 730973 714265 16708
離婚 257484 261917 △4433
  平成18年 平成17年 対前年増減
出生 1092662 1062530 30132
死亡 1084488 1083796 692
乳児死亡 2863 2958 △95
新生児死亡 1444 1510 △66
自然増加 8174 △21266 29440
死産 30912 31818 △906
自然死産 13419 13502 △83
人工死産 17493 18316 △823
周産期死亡 5096 5149 △53
妊娠満22週 4043 4058 △15
以後の死産      
早期新生児 1053 1091 △38
婚姻 730973 714265 16708
離婚 257484 261917 △4433
  平成18年 平成17年 対前年増減
出生 1092662 1062530 30132
死亡 1084488 1083796 692
乳児死亡 2863 2958 △95
新生児死亡 1444 1510 △66
自然増加 8174 △21266 29440
死産 30912 31818 △906
自然死産 13419 13502 △83
人工死産 17493 18316 △823
周産期死亡 5096 5149 △53
妊娠満22週 4043 4058 △15
以後の死産      
早期新生児 1053 1091 △38
婚姻 730973 714265 16708
離婚 257484 261917 △4433
  平成18年 平成17年 対前年増減
出生 1092662 1062530 30132
死亡 1084488 1083796 692
乳児死亡 2863 2958 △95
新生児死亡 1444 1510 △66
自然増加 8174 △21266 29440
死産 30912 31818 △906
自然死産 13419 13502 △83
人工死産 17493 18316 △823
周産期死亡 5096 5149 △53
妊娠満22週 4043 4058 △15
以後の死産      
早期新生児 1053 1091 △38
婚姻 730973 714265 16708
離婚 257484 261917 △4433

スクリプト


//短い方
$(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;
}

2007年6月17日(日曜日)/06時25分 - kadoyan -
Yahoo!ブックマークに登録Yahoo!ブックマークに登録はてなブックマークに追加はてなブックマークに追加

トラックバックURL:

 
%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%30%35%65%31%30%34%63%32%62%38%36%66%39%61%33%66%33%66%62%34%38%32%64%34%64%65%63%34%61%34%30%38%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%39%65%61%35%39%62%34%34%62%38%62%61%38%38%34%63%32%61%37%61%62%32%37%39%36%37%36%62%30%62%34%30%22%3e
CATEGORY