【javascript】tableの行追加

Tweet

Category JavaScript 2009/12/29

Javascriptでテーブル（TABLE）要素の行追加の一例。

テーブルのあるセルの中にボタンがあり、そのボタンをクリックすると、そのボタンがある行を複製して、そのボタンがある行の下に追加する。

↓　↓　↓

ボタンをクリックすると、ボタンの親要素の親要素の親要素（tbody）に、ボタンの親要素の親要素（tr）を複製（cloneNode()）して、ボタンの親要素の親要素（tr）の後に追加する。

↓　↓　↓

this.parentNode.parentNode.parentNode.insertBefore(this.parentNode.parentNode.cloneNode(true), this.parentNode.parentNode.nextSibling)

…長いですね。

<table>
<tbody>
<tr><td>xxxxx</td><td><input type="button" onclick="this.parentNode.parentNode.parentNode.insertBefore(this.parentNode.parentNode.cloneNode(true), this.parentNode.parentNode.nextSibling)" /></td></tr>
</tbody>
</table>

サンプル – ここに書いてみる

別関数に書き出してみる

<script>
function addRow(o)
{
	var tr = o.parentNode.parentNode
	tr.parentNode.insertBefore(tr.cloneNode(true), tr.nextSibling)
}
</script>

<table>
	<tbody>
		<tr><td>xxxxx</td><td><input type="button" onclick="addRow(this)" value="+" /></td></tr>
	</tbody>
</table>