javascript - 各テーブル行にフォームとそのファイル入力を追加するにはどうすればよいですか？

Question

ここにJsfiddleアプリケーションがあります。テキストエリアに質問を入力し、[質問を追加]ボタンをクリックすると、下の表に質問と質問番号が追加されます（必要に応じて、これを数回テストできます）。

表の下には、別の形式で保存されているファイル入力があります。私の質問は、ファイル入力を含むフォームコードをテーブルに配置して、質問が追加されるたびに質問番号と質問を追加するだけでなく、各行のファイル入力も追加するようにするにはどうすればよいですか？

Answer 1

ファイル入力の値を取得して、それを行に追加できます。

var fileinput = $("#fileinput").val();

Answer 2

あなたはそれをしているのと同じ方法でそれをすることができます。これらの行は、ファイル入力の名前など、サーバー側で期待するものに応じて変更することを忘れないでください。

var $image = $("<td class='image'></td>"); 
var $fileImage = '<p id="f1_upload_form"><br/><label>File: <input name="fileImage" type="file" id="fileImage" /></label></p>';
$image.append($fileImage);
$tr.append($image);

ここで、アップロードボタンを、テーブルをラップしているフォーム内にあるテーブルの下部に移動する必要があります。

これが動作するjsfiddleです。