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 コメントで指摘頂いた分を修正。