ボタンクリックでテーブルに行を追加する JavaScript

TOP > Web制作技術 > JavaScript > ボタンクリックでテーブルに行を追加する JavaScript

2009年3月14日 12:55

ユーザー側から任意の複数行のデータをフォームから受け取る場合に、入力フォームのテーブルの行を、ボタンクリックで動的に追加していく処理というのは、結構使えるんじゃないかなと思います。

例えば、以下のようなテーブルがある場合。

<table border="1" cellspacing="0" cellpadding="4" id="table1">
  <tr>
    <th>名前</th>
    <th>住所</th>
    <th>TEL</th>
  </tr><tr>
    <td class="name"><input type="text" name="name" value="" size="10" maxlength="20" /></td>
    <td class="address"><input type="text" name="address" value="" size="10" maxlength="20" /></td>
    <td class="tel"><input type="text" name="tel" value="" size="10" maxlength="20" /></td>
  </tr>
</table>

「insertRow」や「insertCell」を使って、「table1」という ID を持つテーブルに、行を追加します。

var table1 = document.getElementById("table1");
var row1 = table1.insertRow(1);	// 行を追加
var cell1 = row1.insertCell(0);	// 一つ目のセルを追加
var cell2 = row1.insertCell(1);	// 二つ目のセルを追加
var cell3 = row1.insertCell(2);	// 三つ目のセルを追加

「insertRow」「insertCell」の各引数は、何番目の行・セルを追加するかを指定します。
IEでは引数なしでも動きますが、FireFoxでは引数が必須なので注意。

で、最初のサンプルでは各セルに class を指定していたわけですが、追加したセルに class を指定するには、「setAttribute」「className」等を使います。

cell1.setAttribute("class","name");
cell2.setAttribute("class","address");
cell3.setAttribute("class","tel");

cell1.className = 'name';
cell2.className = 'address';
cell3.className = 'tel';

また、セルの中身である input 要素等を入れるのには、「innerHTML」を使います。

var HTML1 = '<input type="text" name="name" value="" size="10" maxlength="20" />';
var HTML2 = '<input type="text" name="address" value="" size="10" maxlength="20" />';
var HTML3 = '<input type="text" name="tel" value="" size="10" maxlength="20" />';
cell1.innerHTML = HTML1;
cell2.innerHTML = HTML2;
cell3.innerHTML = HTML3;

ただ、これだとボタンをクリックされる毎に追加される input 要素の name 属性が、全て「name」「address」「tel」になってしまうので、別途カウンタを回して「name1」「name2」......みたいな感じになるようにした方が良いでしょう。

この辺の事も踏まえたうえでのサンプルコードは以下。

<script type="text/javascript">
var counter = 0;
function AddTableRows(){
	// カウンタを回す
	counter++;

	var table1 = document.getElementById("table1");
	var row1 = table1.insertRow(counter);
	var cell1 = row1.insertCell(0);
	var cell2 = row1.insertCell(1);
	var cell3 = row1.insertCell(2);

	// class の付与は UserAgent によって
	// 挙動が違うっぽいので念のため両方の方法で
	cell1.setAttribute("class","name");
	cell2.setAttribute("class","address");
	cell3.setAttribute("class","tel");
	cell1.className = 'name';
	cell2.className = 'address';
	cell3.className = 'tel';

	var HTML1 = '<input type="text" name="name' + counter + '" value="" size="10" maxlength="20" />';
	var HTML2 = '<input type="text" name="address' + counter + '" value="" size="10" maxlength="20" />';
	var HTML3 = '<input type="text" name="tel' + counter + '" value="" size="10" maxlength="20" />';
	cell1.innerHTML = HTML1;
	cell2.innerHTML = HTML2;
	cell3.innerHTML = HTML3;
}
</script>

<table border="1" cellspacing="0" cellpadding="4" id="table1">
  <tr>
    <th>名前</th>
    <th>住所</th>
    <th>TEL</th>
  </tr><tr>
    <td class="name"><input type="text" name="name0" value="" size="10" maxlength="20" /></td>
    <td class="address"><input type="text" name="address0" value="" size="10" maxlength="20" /></td>
    <td class="tel"><input type="text" name="tel0" value="" size="10" maxlength="20" /></td>
  </tr>
</table>
<form method="GET" action="#">
  <input type="button" value="テーブルに行を追加" onClick="AddTableRows();" />
</form>