テキストボックスの追加

Webページを開いて何か入力する際に、入力項目を追加したり削除したりするボタンが欲しいときがある。それを実現する JavaScript を書いてみた。今回はテキストボックスの追加のみだが。

    <form name="testForm" action="http://www.me.local/post" method="POST">
      <table border="1">
	<tbody id="id1">
	  <tr><th>Field0</th><td><input type="text" name="field0"></input></td></tr>
	</tbody>
      </table>
    </form>
    <script type="text/javascript">
      var text_box_index = 1;
      function add() {
        var element=document.createElement("tr");
        element.innerHTML="<th>Field" + text_box_index + "</th><td><input type='text' name='box" + text_box_index + "'></input></td>";
        var parent = document.getElementById("id1");
        parent.appendChild(element);
        parent.appendChild(document.createTextNode("\n	  "));
        window.alert(document.getElementById("id1").innerHTML);
        text_box_index = text_box_index + 1;
      }
    </script>
    <button onclick="add();">Test</button>

いくつかポイントがある。

• document.createElement("xxx") で追加対象となる要素を作成。この例では Table の tr を追加していくようにしてみた。
• 要素の innerHTML 値がその要素の html となる。
• 追加先は document.getElementById("id") で取得する。
• 追加先に appendChild をすることで要素を追加できる。
• 追加先に文字列をそのまま追加したい場合は document.createTextNode("xxx") を appendChild の引数にする

また今度、削除もやってみたいと思う。