【javascript】動的にテーブルを作成し、DBから取得したＸＭＬを流し込みつつ、1行ごとに着色する

【今回の紹介】

今回はシンプルにテーブルの色を一行ごとに

変化させる方法を紹介します。

【内容】

方法は知ってる方にとっては常識とか当たり前かもしれませんが、

乗算算です。

具体的なソースの該当部分は

ここ

		if(i%2){
				row.style.backgroundColor = "#ccffff";
		}

テーブルの行数に対して2で割って余りがあるかで判定して着色しています。

とてもシンプルでよい！

〇〇行ごととかいろいろ試してみるとおもしろいですねー！

※ちなみに参考ソースでは、

①ＸＭＬを所得

②テーブルの作成

③rowを作りながら、ＸＭＬのデータを流し込む

ということを行っています。

【以下参考ソース】

function serch_output(xmldate){

var div_serch_result=document.getElementById("result_sta");

//すでにテーブルがないか判定
	if(div_serch_result.hasChildNodes){
			div_serch_result.removeChild(div_serch_result.firstChild);
	}

//テーブルの作成
var table=document.createElement("table");
var tbody=document.createElement("tbody");

var nodelist=xmldate.getElementsByTagName('list');

//取得してきたＸＭＬの行の数だけテーブルを作成
	for(var i=0;i<nodelist.length;i++){
	
//2で割り切れない場合のみ着色
	var row=document.createElement("tr");
		if(i%2){
				row.style.backgroundColor = "#ccffff";
		}
	
//ＤＢ取得データをテーブルobjに流し込む処理
		for(var k=0;k<4;k++){
			var cell=document.createElement("td");
			cell.innerHTML=nodelist[i].childNodes[k].childNodes[0].nodeValue;
			row.appendChild(cell);
		}
		tbody.appendChild(row);
	}
	table.appendChild(tbody);
	table.border=1;
	document.getElementById("result_sta").appendChild(table);
}