フォーム可変長テーブル

以下の 3 つの記事の内容をまとめて、

• テキストボックスの追加 - Shammerism
• 要素を削除しようと思って・・・ - Shammerism
• HTML要素の削除 - Shammerism

以下の機能を満たすHTML & JavaScript を作成。

• 最初は入力フォームが一つだけ
• Add をクリックすると入力フォームが一つ追加される
• Remove をクリックすると一番最後の入力フォームが削除される

できあがったコードは以下。

    <form name="serverForm" action="http://www.me.local/post" method="POST">
      <table border="1">
	<tbody id="id1">
	  <tr><th>Key</th><th>Value</th></tr>
	  <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 del(){
        if( text_box_index > 1 ){
          var removeID = "tr" + --text_box_index;
          var removeElement = document.getElementById(removeID);
          removeElement.parentNode.removeChild(removeElement);
        }
      }
      function add() {
	var element=document.createElement("tr");
	var addID = "tr" + text_box_index++;
	element.setAttribute("id", addID);
	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	  "));
      }
    </script>
    <button onclick="add();">Add</button><button onclick="del();">Remove</button>