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

締切り済みの質問

ソースの簡略化、、、

「行追加をクリック」すると、テキスト入力覧が表示されるという仕組みのプログラムです。

詳細:
htmlファイルに line_1から~line_20までタグをいっぱい書き、

最初はjavascriptを利用して「XXXX.style.display = 'none';」すべて見せない状態にしまし

その状態で、「行追加をクリック」をクリックするとjavascript処理で1つずつ表示されるようにしました。

ここで質問ですが、

20個の同じコードを繰り返しいっぱい書く代わりにこれらをまとめて簡単にすることはできないでしょうか? 例え、40個の表示が必要となれば同じコードを40回も書かなきゃいけないので、、大変です。


<div id="line_1" class="mytext">
<tr>
<td width=50>
<input type="text" name="Line1">
</td>
</tr>
</div>

<div id="line_2" class="mytext">
<tr>
<td width=50>
<input type="text" name="Line2">
</td>
</tr>
</div>

<div id="line_3" class="mytext">
<tr>
<td width=50>
<input type="text" name="Line3">
</td>
</tr>
</div>

<div id="line_4" class="mytext">
<tr>
<td width=50>
<input type="text" name="Line4">
</td>
</tr>
</div>







<div id="line_20" class="mytext">
>
<tr>
<td width=50>
<input type="text" name="Line20">
</td>
</tr>
</div>
<p class="UP"><a href="#" id="upLine">行追加</a></p>

ご教授よろしくお願いします。

投稿日時 - 2011-02-24 02:08:38

QNo.6546142

すぐに回答ほしいです

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

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

回答(4)

ANo.4

そもそも、不正なHTMLですが <div> で括るのは必須なのでしょうか…。
http://jsbin.com/epima3/2

投稿日時 - 2011-02-24 14:16:13

ANo.3

表示/非表示による方法ではなく、実際に追加してゆく方法に関する記事が以下にありますので、ご参考まで。

 http://www.abe-tatsuya.com/web_prog/javascript/add_table_rows.php

投稿日時 - 2011-02-24 10:58:34

ANo.2

「XXXX.style.display = 'none';」で、すべて見せない状態にしてあっても、
サブミットされると、中身が空でも全部のテキストボックスが送信されますが、
それでもよろしいんですか?

document.createElementとelement.appendChild(element)を使う方法や
element.innerHTMLで書き換える方法(form内を書き換える時IEは要注意!)

もあります。

投稿日時 - 2011-02-24 09:38:00

ANo.1

こんばんは。

tableを使うのなら、追加したいときに、
insertRow
でいいと思います・・・。

投稿日時 - 2011-02-24 03:27:47

あなたにオススメの質問