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

这将帮助你完成大部分工作。

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

我觉得这样的事情。

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

我把它移动了所以它都在一个表格行中：

<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

如何使用jQuery来扩展HTML表单？

5 个答案: