ボタンを押してテキストボックスを追加しテーブルの作成

解決済

質問者：eccschool
質問日時：2009/02/28 21:58
回答数：2件

avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。
下記のようにイメージして書いたのですが、考えが詰まりました。
テーブルでなくても、2列複数行の形になればいいんですが・・・
教えて下さい。よろしくお願いします。
<script type="text/javascript">

</script>
</head>
<body>
<form id="form1" action="check.php" method="post">
<span id="area">
<table style="text-align: left; width: 100px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><input type="text" name="hoge1" value=""></td>
<td><input type="text" name="fuga1" value=""></td>
</tr>
<tr>
<td><input type="text" name="hoge2" value=""></td>
<td><input type="text" name="fuga2" value=""></td>
</tr>
<tr>
<td><input type="text" name="hoge3" value=""></td>
<td><input type="text" name="fuga3" value=""></td>
</tr>
</tbody>
</table>
</span>
<input type="button" value="Add" onClick="myAdd()">
</form>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2009/03/01 15:23

＞一つ解決したらまた問題発生します。

それはなんとなく書いているからですね。
きちんと設計すれば思ったとおりにしか動かないのがプログラムです。
今回の件は、自分自身をオブジェクトでわたしてやればよいでしょう。

<script>
function myAdd(obj){
var max=5;
var c=count("hoge");
if(c>=max) return false;
var oTR=document.createElement("tr");
var names=["hoge","fuga"];
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);
if(c>=max-1) obj.disabled=true;
}
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;
}
</script>
</head>
<body>
<form>
<table id="t0" border>
<tbody>
<tr>
<td><input type="text" name="hoge1" value=""></td>
<td><input type="text" name="fuga1" value=""></td>
</tr>
<tr>
<td><input type="text" name="hoge2" value=""></td>
<td><input type="text" name="fuga2" value=""></td>
</tr>
<tr>
<td><input type="text" name="hoge3" value=""></td>
<td><input type="text" name="fuga3" value=""></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="myAdd(this)">
</form>