ソースの簡略化、、、

質問

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

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

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

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

ここで質問ですが、

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

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

<div id="line_２" 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>

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

回答No.4

think49

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

回答No.3

fujillin

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

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

回答No.2

yyr446

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

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

もあります。

回答No.1

taka451213

こんばんは。

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