jQueryを使った、テーブルの行や列の奇数・偶数・行番号・列番号を区別するClassを自動で付与するfunctionを書いてみました
cssでテーブルを偶数行だけ背景色をつけたり、最初の列だけ太い字にしたり、といった装飾するために、trやtdタグに 奇数・偶数、行番号・列(カラム)番号を区別するためにclassをつける処理を、JavaScript(jQuery)を使用してつけるfunctionを書いてみた。
行の区別として、trに偶数行なら「ev」奇数行なら「od」、さらに「row{行番号}」という名前のclassを付ける。
列(カラム)の区別として、thやtdに偶数列なら「ev」奇数行なら「od」、さらに「col{列番号}」という名前のclassを付ける。
こうする事で、cssでの装飾が容易になる。
例えば全行の1列目のセルを装飾する場合は「.col1{color:red;}」、
偶数行の1列目のセルだけを装飾するなら「tr.ev .col1{color:red;}」、
全行の偶数列のセルだけを装飾するなら「.col1.ev{color:red;}」、
2行目の3列のセルだけを装飾するなら「.row2 .col3{color:red;}」、
といった具合で指定できるようになる。
※ ちなみに、セルの結合(rowspan、colspan)にも対応させている。
サンプル
このテーブルは、JavaScriptで各要素にclassを付与して、CSSを適応させている。
.row1 .col1 | .row1 .col2 | .row1 .col3 |
---|---|---|
.row2 .col1 | .row2 .col2 | .row2 .col3 |
.row3 .col1 | .row3 .col2 | .row3 .col3 |
.row4 .col1 | .row4 .col3 | |
.row5 .col1 | .row5 .col2 | |
.row6 .col1 |
テーブルのHTML
普通にテーブルのHTMLを記述する。
id等をつけてテーブルを特定できるようにしておく。
<table id="sample_table" width="100%"> <tr> <th>.row1 .col1</th> <td>.row1 .col2</td> <td>.row1 .col3</td> </tr> <tr> <th>.row2 .col1</th> <td>.row2 .col2</td> <td>.row2 .col3</td> </tr> <tr> <th>.row3 .col1</th> <td rowspan="2">.row3 .col2</td> <td>.row3 .col3</td> </tr> <tr> <th>.row4 .col1</th> <td>.row4 .col3</td> </tr> <tr> <th>.row5 .col1</th> <td rowspan="2" colspan="2">.row5 .col2</td> </tr> <tr> <th>.row6 .col1</th> </tr> </table>
<style> #sample_table th, #sample_table td{ padding:1em; border:1px solid blue; } #sample_table .col1{ font-weight:bold; background-color:#E5EDFF; } #sample_table .row3 .col2{ font-weight:bold; color:red; } </style>
ページを読み込んだタイミングで実行
後述の装飾用function(table_add_class)にテーブルを指定して処理をかける。
jQueryで対象テーブルを指定するセレクタ文字列又は対象テーブルのjQueryオブジェクトを渡して実行する。
また、jQueryも必須なので、読み込んでおくこと。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ table_add_class("#sample_table"); }); </script>
行や列の奇数・偶数・行番号・列番号を区別するためのClassを付与するJavaScriptのfunction
これが今回作成したJavaScriptのfunction。
jQueryで対象テーブルを指定するセレクタ文字列又は対象テーブルのjQueryオブジェクトを渡して実行する。
<script> // テーブルに行番号・列番号・奇数・偶数のClassを付与するfunction function table_add_class(obj){ var odname = "od"; //奇数の識別名 var evname = "ev"; //偶数の識別名 var rowname = "row"; //行の識別名 var colname = "col"; //列の識別名 // jQueryセレクタ文字列を受け取った場合 if(typeof obj == "string"){ obj = $(obj); } if(typeof obj == "object" && obj.length){ // tbodyをスルー if(obj.children("tbody").length){ obj = obj.children("tbody"); } var alr = new Array(); //スルーするセル(colspan、rowspan対策メモ用) // 行の処理開始 var rownum = 1; //行番号 obj.children("tr").each(function(){ // trに行番号のclass名を追加(row1 | row2 | row3 ...) $(this).addClass(rowname + rownum); // trに偶数・奇数のclass名を追加(ev | od) if(rownum % 2 == 0){ $(this).addClass(evname); }else{ $(this).addClass(odname); } // 列の処理開始 var colnum = 1; //列番号 $(this).children("th,td").each(function(){ //colspan、rowspan対策 // 当該セルがスルーするセルなら、列番号を加算 while(alr.indexOf("row" + rownum + "col" + colnum) >= 0){ colnum++; } // trに行番号のclass名を追加(col1 | col2 | col3 ...) $(this).addClass(colname + colnum); // th又はtdに偶数・奇数のclass名を追加(ev | od) if(colnum % 2 == 0){ $(this).addClass(evname); }else{ $(this).addClass(odname); } //rowspan、colspanの設定があるかチェック var rowspan = $(this).attr("rowspan"); var colspan = $(this).attr("colspan"); // rowspanをチェックして、スルーするセル情報を追加 if(typeof rowspan != "undefined"){ rowspan = Number(rowspan); for(var row_i = 1; row_i < rowspan; row_i++){ // colspanをチェックして、スルーするセル情報を追加 if(typeof colspan != "undefined"){ colspan = Number(colspan); for(var col_i = 0; col_i < (colspan -1); col_i++){ if(row_i == 1){ alr.push("row" + rownum + "col" + (colnum + col_i)); } alr.push("row" + (rownum + row_i) + "col" + (colnum + col_i)); } }else{ alr.push("row" + (rownum + row_i) + "col" + colnum); } } // colspanをチェックして、スルーするセル情報を追加 }else if(typeof colspan != "undefined"){ colspan = Number(colspan); for(var col_i = 1; col_i < colspan; col_i++){ alr.push("row" + rownum + "col" + (colnum + col_i)); } } colnum++; }); rownum++; }); } } </script>
処理後のテーブルのソースコード
正常に処理が為されると、テーブルのHTMLは次の様になります。
※ ブラウザによって、tbodyタグが自動的に追加されています。
<table id="sample_table" width="100%"> <tbody><tr class="row1 od"> <th class="col1 od">.row1 .col1</th> <td class="col2 ev">.row1 .col2</td> <td class="col3 od">.row1 .col3</td> </tr> <tr class="row2 ev"> <th class="col1 od">.row2 .col1</th> <td class="col2 ev">.row2 .col2</td> <td class="col3 od">.row2 .col3</td> </tr> <tr class="row3 od"> <th class="col1 od">.row3 .col1</th> <td rowspan="2" class="col2 ev">.row3 .col2</td> <td class="col3 od">.row3 .col3</td> </tr> <tr class="row4 ev"> <th class="col1 od">.row4 .col1</th> <td class="col3 od">.row4 .col3</td> </tr> <tr class="row5 od"> <th class="col1 od">.row5 .col1</th> <td rowspan="2" colspan="2" class="col2 ev">.row5 .col2</td> </tr> <tr class="row6 ev"> <th class="col1 od">.row6 .col1</th> </tr> </tbody></table>
あまり複雑なテーブルでのテストはしてませんが、単純な事しかしていませんので、よほどオカシな記述でない限りたぶん大丈夫だと思います。
