Question

当用户在数量字段中输入数据时，我想在表格的末尾添加新行。

我的表格如下。我正在使用Bootstrap 3.1.1，以及jQuery 1.11

基本上，它是一个快速订单表格。我希望能够为用户提供足够的字段来填写所有时间。

<div class="container White_BG">
    <div class="row" style="margin-left:0;margin-right:0;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1>Quickly place your order with this form.</h1>
            <h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>
            <div class="table-responsive">
                <form method="post" name="QuickOrderMulti">
                    <table class="table table-bordered table-condensed table-hover">
                        <tr>
                            <th class="active">Item #</th>
                            <th class="active">Quantity</th>
                            <th class="active">Description</th>
                            <th class="active">Price</th>
                            <th class="active">Subtotal</th>
                        </tr>
                        <tr>
                            <td class="col-lg-2 ProductNumber"><input type="text" name="ProductNumber"></td>
                            <td class="col-lg-2 Quantity"><input type="text" name="Quantity"></td>
                            <td class="col-lg-2 QuickDescription"></td>
                            <td class="col-lg-2 QuickPrice"></td>
                            <td class="col-lg-2 QuickSubtotal"></td>
                        </tr>
                    </table>
                    <input type="submit" value="Add to Cart" class="btn btn-default btn-orange">
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以在jQuery中使用.append（）方法。例如：

$('.table').append(table_row_data);

其中table_row_data是您要插入的行的字符串版本

因此，如果您想要根据数量创建的行，您可以这样做：

var quantity = $('td.Quantity input').val();
for(var i=0; i<quantity; i++) {
    $('.table').append(table_row_data);
}

虽然，您可能希望在数量输入字段上添加一个id，以便您的jQuery搜索可以更具体一些。然后你可以把它全部包装在像：

这样的事件中

$('#quantity_input').on("change", function() {
    var quantity = $(this).val();
    for(var i=0; i<quantity; i++) {
        $('.table').append(table_row_data);
    }
});

jQuery在将数据输入到数量字段时添加新表行

1 个答案: