代码之家 › 专栏 › 技术社区 › Zack Peterson

如何使用jquery来增长HTML表单?

html jquery

Zack Peterson · 技术社区 · 16 年前

我正在创建一个简单的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完成此操作?

5 回复 | 直到 16 年前

ceejayoz 16 年前

这会让你走得更远。

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

JMP 16 年前

您可以创建要附加到表单的HTML,并使用 jQuery.append() .

有时我要做的是在表单表中保留一个tbody,并给出tbody和id,这样我就可以通过jquery引用它来附加额外的行/单元格/表单输入。

Joel 16 年前

我想是这样的。

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

Chris Thompson 16 年前

保持一个柜台可能会有所帮助,比如

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

Zack Peterson 16 年前

我把它移了一圈,所以它都在一个表行中:

<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