JavaScriptで入力欄追加

2日連続メモエントリですがw
JavaScript を色々いじったのでまとめておきます。
但し、JavaScript 素人なので不備は悪しからずご了承ください!w



無限


ボタンを押した分だけ増えます。
但し入力済みの値は消えません。

var cnt = 1;
function addText() {
  var a = document.getElementsByName("a")[0];
  var b = document.getElementById("b" + cnt);
  cnt += 1;
  b.innerHTML += "<hr />" + a.innerHTML + '<span id="b' + cnt + '"></span>'
}
<table border="1">
<tr>
<th>無限
<input type="button" onClick="addText()" value="+" /></th>
<td>
<span name="a">
<input type="text" name="i" /><br />
</span>
<span id="b1"></span>
</td>
</tr>
</table>

有限


テーブルの行が増えます。
今回は3つまで。

var row = 1;
function showText() {
  row += 1;
  var c = document.getElementById("c" + row);
  c.style.display = "table-row";
}
<table border="1">
<tr id="c1">
<th>有限
<input type="button" onClick="showText()" value="+" /></th>
<td><input type="text" id="j1" /></td>
</tr>
<tr id="c2" style="display:none;">
<th> 2</th>
<td><input type="text" id="j2" /></td>
</tr>
<tr id="c3" style="display:none;">
<th> 3</th>
<td><input type="text" id="j3" /></td>
</tr>
</table>


こんな感じで。
他に良いやり方ありそうな気がするけど…。

        • -

2011/06/28 コメントで指摘頂いた分を修正。