追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。
で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？
あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？
<script type="text/javascript">
function myAdd(){
var oTR=document.createElement("tr");
var c=count("mat");
var names=["mat","qua"];
for(var i in names){
var oTD = document.createElement("td");
var oTag = document.createElement("input");
oTag.setAttribute("type", "text");
oTag.setAttribute("name", names[i] + (c+1).toString());
oTD.appendChild(oTag);
oTR.appendChild(oTD);
}
document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR);
}
function count(name){
var tags=document.getElementsByTagName("input");
var c=0;
var reg=RegExp("^"+name+"[0-9]+$");
for(var i=0;i<tags.length;i++){
if(tags[i].name.match(reg)){
c++;
}
}
return c;
}
var tag_num = 4;
function myTextAreaAdd(){
var oTag = document.createElement("textarea");
oTag.setAttribute("name", "foo" + tag_num++);
var oDiv = document.getElementById("area");
oDiv.appendChild(oTag);
}
</script>
</head>
<body><form method="post" enctype="multipart/form-data" action="check.php">
<table id="t0" border>
<tbody>
<tr><td><input type="text" name="mat1" value=""></td>
<td><input type="text" name="qua1" value=""></td>
</tr>
<tr><td><input type="text" name="mat2" value=""></td>
<td><input type="text" name="qua2" value=""></td>
</tr>
<tr><td><input type="text" name="mat3" value=""></td>
<td><input type="text" name="qua3" value=""></td>
</tr>
<tr><td><input type="text" name="mat4" value=""></td>
<td><input type="text" name="qua4" value=""></td>
</tr>
</tbody>
</table>
<input type="button" value="追加する" onClick="myAdd()">
<br />
<span id="area">
<textarea name="foo1"></textarea>
<textarea name="foo2"></textarea>
<textarea name="foo3"></textarea>
<textarea name="foo4"></textarea>
</span><br />
<input type="button" value="追加する" onClick="myTextAreaAdd()"><br />
</form>
