我正在创建产品购买表单。我需要在哪里创建多个表行。我的意思是当我选择一个产品时，它应该创建一个新行，但它只创建一行。请查看图片 - https://www.screencast.com/t/YuzCMY2Is
这里的HTML代码 -
<div class="row">
<div class="col-md-12">
<div class="product_name">
<div class="form-group has-feedback">
<select name="products" id="Products" class="select-search" required>
<option value="">Select Product</option>
<?php
if(isset($products)){
foreach($products as $proData){
if($proData['status'] == 1){
echo '<option value="'.$proData['id'].'">'.$proData['name'].'</option>';
}
}
}
?>
</select>
</div>
</div>
</div>
</div><!-- row end -->
<div class="row">
<div class="col-md-12">
<div class="product_header">
<h6 style="display: inline;">Purchase Product List</h6>
<div class="pull-right">
<div class="form-group">
</div>
</div>
<div class="clearfix"></div>
</div>
<table class="table table-responsive cms_table">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Unit Price ৳</th>
<th>Pack Size (Kg)</th>
<th>Unit (Jar/Drum)</th>
<th>Total Kg/s</th>
<th>Total Price ৳</th>
<th><button class="btn btn-default" type="button" id="newRow"><i class="icon-plus2"></i></button></th>
</tr>
</thead>
<tbody id="ProductDisplay">
<!-- product rows display hear -->
</tbody>
<tfoot>
<tr class="text-right">
<td colspan="5"><strong>Total Kg/s & Amount</strong></td>
<td>-</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td colspan="6" class="text-right"><strong>Less :</strong></td>
<td><input type="number" name="less" placeholder="Less" class="form-control"></td>
<td></td>
</tr>
<tr>
<td colspan="6" class="text-right"><strong>Discount % :</strong></td>
<td><input type="number" name="discount" placeholder="Discount %" class="form-control"></td>
<td></td>
</tr>
<tr>
<td colspan="6" class="text-right"><strong>Due :</strong></td>
<td><input type="number" name="due" placeholder="Due" class="form-control"></td>
<td></td>
</tr>
<tr>
<td colspan="6" class="text-right"><strong>Total :</strong></td>
<td><input type="number" name="total" value="200000" class="form-control" readonly></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</div><!-- row end -->
ajax代码 -
$('#Products').change(function(){
var products = $('#Products').val();
$.ajax({
url : "<?php echo base_url('Purchase/ajaxProducts')?>",
method : 'POST',
data : { 'products' : products },
success:function(data){
$('#ProductDisplay').html(data);
}
});
});
php code -
public function ajaxProducts(){
$products = $this->input->post('products');
/* echo $products; exit();*/
$this->db->select('*');
$this->db->from('products');
$this->db->where('id', $products);
$ajaxQuery = $this->db->get()->result_array();
foreach($ajaxQuery as $proData){
if($proData['status'] == 1){
echo '
<tr>
<td><input class="form-control" type="text" name="product_name[]" value="'.$proData['name'].'"></td>
<td><input class="form-control" type="number" name="qnt[]" placeholder="Quantity"></td>
<td><input class="form-control" type="number" name="unit_price[]" value="'.$proData['regular_price'].'"></td>
<td><input class="form-control" type="number" name="pack_size[]" placeholder="Pack Size"></td>
<td><input class="form-control" type="number" name="unit_pack[]" placeholder="Unit Pack (jar/Drum)"></td>
<td><input class="form-control" type="number" name="total_kg[]" placeholder="Total Kg/s" value="" readonly></td>
<td><input class="form-control" type="number" name="total_price[]" placeholder="Total Price ৳" value="" readonly></td>
<td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
</tr>
';
}
}
}
我正在使用Codeigniter。谢谢
答案 0 :(得分：1)
首先，不要立即回复..在php的for循环中做这个..
$output = '';
foreach($ajaxQuery as $proData){
if($proData['status'] == 1){
$output .= '
<tr>
<td><input class="form-control" type="text" name="product_name[]" value="'.$proData['name'].'"></td>
<td><input class="form-control" type="number" name="qnt[]" placeholder="Quantity"></td>
<td><input class="form-control" type="number" name="unit_price[]" value="'.$proData['regular_price'].'"></td>
<td><input class="form-control" type="number" name="pack_size[]" placeholder="Pack Size"></td>
<td><input class="form-control" type="number" name="unit_pack[]" placeholder="Unit Pack (jar/Drum)"></td>
<td><input class="form-control" type="number" name="total_kg[]" placeholder="Total Kg/s" value="" readonly></td>
<td><input class="form-control" type="number" name="total_price[]" placeholder="Total Price ৳" value="" readonly></td>
<td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
</tr>';
}
}
echo $output;
然后在你的JS ..
如果您添加一行
，请使用$('#ProductDisplay').html(data);而不是$('#ProductDisplay').append(data);