テーブルのクリックした行と列を取得してみる

JavaScriptの理屈が分かってきたのでクリックした行と列を取得するコードを組んでみた。ちなみにこれIEでしか動かないっす。。。修正。動くようにした。

function my_alert(i, j) {
	alert(i + "行：" + j + "列");
}

function load() {
	document.getElementById("result").innerHTML = "";

	var table = document.createElement('table');
	var tbody = document.createElement('tbody');

	for(var i=1; i<=10 ; i++) {
		var tr = document.createElement('tr');
		for(var j=1; j<=10; j++) {
			var td = document.createElement('td');
			td.innerHTML = "＿";
//			td.setAttribute('onclick', new Function('my_alert(' + i + ',' + j + ')'));
			td.onclick = new Function('my_alert(' + i + ',' + j + ')');
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}

	table.appendChild(tbody);
	document.getElementById("result").appendChild(table);
}

サンプルは↓

サンプル

簡単に説明するとtdエレメントにonclick属性をセットして、my_alert関数を呼ばせる。呼ばせるときに、行と列を渡すことでmy_alert関数でクリックした場所が分かるという仕組み。クリックされると、行列をポップアップで表示している。

これを応用すれば、色々出来そう。カレンダーのクリックされた日付に色をつけるとかもこんな仕組みで出来るだろうなぁ。やっぱりJavaScriptは簡単で面白い。