Как я могу использовать jQuery для роста формы HTML?

Question

Я создаю простое веб-приложение, с помощью которого пользователь может создать сообщение с вложенными файлами.

несколько входных файлов HTML со ссылкой jQuery 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

Это даст вам большую часть пути туда.

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

Answer 2

Вы можете создать HTML-код, который хотите добавить в форму, и вставить его в соответствующий контейнер, используя jQuery.append () .

Иногда я сохраняю TBODY в моей таблице форм и даю этот TBODY и ID, чтобы я мог ссылаться на него через jQuery для добавления дополнительных строк / ячеек / форм ввода.

Answer 3

Я переместил это так, чтобы это было все в пределах одной строки таблицы:

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

Теперь это выглядит так:

несколько входных файлов HTML со ссылкой jQuery http://img43.imageshack.us/img43/4474/attachments.gif

Answer 4

Может помочь сохранение счетчика, что-то вроде

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

Answer 5

Я думаю, что-то вроде этого.

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++;
}