JavascriptでTableを操作

プログラミング

内容

タイトル通りJavascriptでTableを操作してみた。

ソースコード

https://gist.github.com/892316

<html>
	<head>
	<title>javascript table</title>
		<script type="text/javascript">
		function onload()
		{
			var table = document.getElementById("t");
			for(var i = 0; i < 20; i++ ) {
				var row = table.insertRow(-1);
				var number = row.insertCell(-1);
				var content = row.insertCell(-1);
				number.innerHTML = i + 1;
				content.innerHTML = "a";
			}
		}
		</script>
	</head>
	<body onload="onload()">
		<p>javascriptでtableを操作</p>
		<table border="4" id="t">
			<tr>
				<th>No.</th>
				<th>内容</th>
			</tr>
		</table>
	</body>
</html>

メモ

insertRow(index)メソッドはindex番目に行を追加する。
indexは上を0番目とする。-1を指定したら、一番下の行が指定される。

insertCell(index)メソッドはindex番目にセルを追加する。
insertRowメソッド同様に-1を指定したら、一番右端が指定される。

参考サイト

Tableを操作するのに役立った http://qune.cside.com/archives/000559.html
insertRowメソッドを理解できた http://jsajax.com/Articles/tablerowinsertcell/167
insertCellメソッドを理解できた http://jsajax.com/Articles/tablerowinsertcell/167