テーブルをフィルタリングさせる

javascript

table要素をフィルタリング出来る様にするライブラリみたいなのを
作ってみようかなって思ってて、まずはその第一段階。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
#tblbox table {
	border-collapse: collapse;
}
#tblbox table tr.ttl {
	background-color: #ECF5FF;
}
#tblbox table td {
	font-family: Verdana;
	padding: 0.2em;
	border: solid 1px #696969;
}
div.pop {
	position: absolute;
	z-index: 99;
	height: 100px;
	background-color: #FFE9A6;
	border: solid 1px #696969;
	overflow: auto;
}
</style>
<script type="text/javascript">
//http://tech.ocit.jp/?eid=703844 のをお借りしました
function getElementPosition(element) {
	var offsetTrail = (typeof element == 'string') ? document.getElementById(element): element;
	var x = 0; var y = 0;

	while (offsetTrail) {
		x += offsetTrail.offsetLeft;
		y += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}

	if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != "undefined") {
		x += document.body.leftMargin;
		y += document.body.topMargin;
	}
	return ({"left" : x, "top": y});
}

function createPullDown(e) {

	var tgt = e.srcElement || e.target;
	var tbl = tgt;

	while (tbl.nodeName != 'TABLE') { tbl = tbl.parentNode; }
	var firstRow = tbl.getElementsByTagName('TR')[0];

	//クリックされた行が1行目でない時は処理終了
	if (tgt.parentNode != firstRow) return;

	//クリックされたセルが何番目かをチェック
	var i = 0;
	while (firstRow.cells[i] != tgt) { i++; }

	var s = '';
	var elmUL = document.createElement('UL');
	elmUL.setAttribute('style', 'padding: 0.2em; margin: 0px;');
	for (var j = 1; j < tbl.rows.length; j++) {
		for (var k = 0; k < tbl.rows[j].cells.length; k++) {
			if (i == k) {
				var elmLI = document.createElement('LI');
				elmLI.innerHTML = tbl.rows[j].cells[k].innerHTML;
				elmLI.setAttribute('style', 'list-style-type: none;');
				elmUL.appendChild(elmLI);
			}
		}
	}

	//クリックされたセルの位置を取得
	var pos = getElementPosition(tgt);
	var x = pos.left; var y = pos.top;

	var elm = document.createElement('DIV');
	elm.style.left = x + 'px';
	elm.style.top = y + tgt.offsetHeight + 'px';
	elm.style.width = tgt.offsetWidth + 'px';
	elm.className = 'pop';

	elm.appendChild(elmUL);
	document.body.appendChild(elm);
}
window.onload = function() {
	var elm = document.getElementById('tblbox');
	if (document.attachEvent) {
		elm.attachEvent('onclick', createPullDown);
	} else if (document.addEventListener) {
		elm.addEventListener('click', createPullDown, false);
	}
}
</script>
</head>
<body>
<div id="tblbox">
	<table>
		<tr class="ttl">
			<td>コミック名</td><td>作者名</td><td>最新巻</td>
		</tr>
		<tr>
			<td>Slam dunk 完全版</td><td>井上 雄彦</td><td>全24巻</td>
		</tr>
		<tr>
			<td>PLUTO</td><td>浦沢 直樹</td><td>6巻</td>
		</tr>
		<tr>
			<td>ベルセルク</td><td>三浦 建太郎</td><td>33巻</td>
		</tr>
	</table>
</div>
</body>
</html>

こんな感じの仕様にしよう(汗

かなりざっくりだけど

  1. table要素の1行目をクリック
  2. 2行目以降の同じ列の値を取得してプルダウンで表示
  3. プルダウン中の値を選択すると、その値を持つ行のみが表示される

みたいな感じでやろうとしてて、今は2の段階まできてる。

盛り込まないといけない事メモ
  • プルダウンリストの重複チェック
  • 全行表示(元に戻す)選択肢を作る
  • 空白行を選択みたいな選択肢を作る
  • 他にも色々…

現時点ではこんな感じ

まだまだ出来てないけど、こんな感じです。