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;}」、
２行目の３列のセルだけを装飾するなら「.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>

あまり複雑なテーブルでのテストはしてませんが、単純な事しかしていませんので、よほどオカシな記述でない限りたぶん大丈夫だと思います。

---

---