SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【javascript】tableの行追加

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>

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

xxxxx

別関数に書き出してみる

<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>

関連するメモ

コメント