読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

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

【今回の紹介】

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


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


【内容】


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



乗算算です。


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

ここ

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


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


とてもシンプルでよい!



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



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

XMLを所得

②テーブルの作成

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


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



【以下参考ソース】

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');

//取得してきたXMLの行の数だけテーブルを作成
	for(var i=0;i<nodelist.length;i++){
	
//2で割り切れない場合のみ着色
	var row=document.createElement("tr");
		if(i%2){
				row.style.backgroundColor = "#ccffff";
		}
	
//DB取得データをテーブル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);
}
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }