テーブルに行を追加

javascript 覚え書き

table要素を一から作る事はあっても*1、既にある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>insertRow sample</title>
<style type="text/css">
table#hoge { border-collapse: collapse; }
table#hoge td {
	border: inset 2px #696969;
	padding: 0.2em;
}
table#hoge tr.ttl { background-color: #72CB54; }
</style>
<script type="text/javascript">
function insRow() {
	var ary = [ '賭博覇王伝 零', '福本 伸行', '5巻' ];
	var tbl = document.getElementById('hoge');
	var n = arguments.length > 0 ? arguments[0]: tbl.rows.length;
	var r = tbl.insertRow(n);
	for (var i = 0; i < ary.length; i++) {
		var c = r.insertCell(i);
		c.innerHTML = ary[i];
	}
}
</script>
</head>
<body>
<div id="tblbox">
	<table id="hoge">
		<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>
	<p>
		<button onclick="insRow();">一番下に追加する</button><br>
		<button onclick="insRow(2);">Slum dunkの次に追加する</button>
	</p>
</div>
</body>
</html>

サンプル

こんな感じになります。

まとめ

凄く簡単*2でわかりやすかった。メソッド名もExcelライクだし。
カレンダーのヤツも、同じやり方で作り直してみよう。

*1:javascriptでカレンダーでは、table→tbody→tr→td→createTextNodeと作っていってappendChildして…って感じで。

*2:まぁ、テキストノードの追加をinnerHTMLでやってるってのもあるけど。