こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。
下記のようにイメージして書いたのですが、考えが詰まりました。
テーブルでなくても、2列複数行の形になればいいんですが・・・
教えて下さい。よろしくお願いします。
<script type="text/javascript">
<!--
var tag_num = 4;
function myAdd(){
var oTag = document.createElement("input");
oTag.setAttribute("type", "text");
oTag.setAttribute("name", "hoge" + tag_num++);
oTag.setAttribute("name", "fuga" + tag_num++);
var oDiv = document.getElementById("area");
oDiv.appendChild(oTag);
}
-->
</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>

投稿日時 - 2009-02-28 21:58:47

QNo.4757584

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

<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>

投稿日時 - 2009-03-01 15:23:54

お礼

ご返答ありがとうございます。
おっしゃるとおりの状況で恥ずかしいともに心が痛いです。
まだプログラマとしては初心者でこれからも勉強していきたいです。
ありがとうございました。

投稿日時 - 2009-03-01 21:09:34

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

ざっとこんな感じで処理してみては?

<script type="text/javascript">
function myAdd(){
var oTR=document.createElement("tr");
var c=count("hoge");
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);
}
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()">
</form>

投稿日時 - 2009-03-01 01:04:20

補足

ありがとうございます。
動きました。あと15個になると追加するボタンをdisableにしようと思っていたんですが、if文で制御してelseでdisableを仕込もうとしたのですが、うまくいきません。
一つ解決したらまた問題発生します。JavaScriptって難しいですね。

投稿日時 - 2009-03-01 10:34:51

お礼

ありがとうございました。
あとテキストエリアも加えたりしています。
あーJavaScriptって難しいですね。

投稿日時 - 2009-03-01 15:02:26

あなたにオススメの質問