jQueryを使用してHTMLフォームを拡張するにはどうすればよいですか？

Question

私は、ユーザーが添付ファイル付きのメッセージを作成するためのシンプルなWebアプリケーションを作成しています。 "別のファイルを添付" のリンクがまだ機能しないこと

multiple HTML file inputs with jQuery link http://img39.imageshack.us/img39/4474/attachments.gif

。クリックすると、追加のテーブル行とファイル入力コントロールがフォームに追加されます。

<tr id="fileinput0"> 
    <td>Attachments</td> 
    <td> 
     <input type="file" name="Attachment0" id="Attachment0" /> 
    </td> 
</tr> 
<tr id="fileinput1"> 
    <td></td> 
    <td> 
     <input type="file" name="Attachment1" id="Attachment1" /> 
    </td> 
</tr> 
<tr id="addinput"> 
    <td></td> 
    <td> 
     <a href="#">attach another file</a> 
    </td> 
</tr> 

また、数字を増やす必要があります。fileinput2、Attachment2; fileinput3、Attachment3;

どうすればjQueryでこれを行うことができますか？

Answer 1

私はそれがすべて、単一のテーブル行の範囲内であったので、それを周りに移動：

<tr> 
    <td>Attachments (<a id="addinput" href="#">add</a>)</td> 
    <td id="fileinputs"> 
     <input type="file" name="Attachment0" id="Attachment0" /> 
    </td> 
</tr> 

そして、これはjQueryを使用：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var num = 0; 
     $("#addinput").click(function() { 
      num++; 
      $("#fileinputs").append("<br /><input type=\"file\" name=\"Attachment" + num + "\" id=\"Attachment" + num + "\" />"); 
     }); 
    }); 
</script> 

それは次のようになります。

multiple HTML file inputs with jQuery link http://img43.imageshack.us/img43/4474/attachments.gif

Answer 2

フォームに追加するHTMLを作成し、jQuery.append()を使用して適切なコンテナに挿入することができます。

時には私のフォームテーブルにTBODYを保存し、そのTBODYとIDを与えて、余分な行/セル/フォーム入力を追加するためにjQuery経由で参照できるようにすることがあります。

Answer 3

私はこれのようなものを考えます。

inputNum = 2; 

function GrowTable() 
{ 
    var input = $("<tr id=\"fileinput" + inputNum + "\"> 
     <td></td> 
     <td> 
      <input type=\"file\" name=\"Attachment" + inputNum + "\" id=\"Attachment" + inputNum + "\" /> 
     </td> 
    </tr>"); 

    input.insertAfter("#fileinput" + (inputNum - 1)); 

    inputNum++; 
} 

Answer 4

カウンタを維持する。これは、あなたが道のほとんどを得るでしょう、

$('form').append("<tr id=\"fileinput" + i + "\"><td></td><td><input type=\"file\" /></td></tr>"); 

Answer 5

のようなものを助けるかもしれません。

var row = $('table tr:last').clone(); 
$(row).attr('id', 'new_ID'); 
$('input', row).attr('id', 'new_ID_for_input'); 
$('table').append(row);