jQuery在將數據輸入數量字段時添加新表格行

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