不创建PHP/Ajax的多表行

我正在创建产品采购表单。我需要在其中创建多个表行。我的意思是，当我选择一个产品时，它应该创建一个新行，但它只创建一行。请检查图像-

以下是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 &#2547;</th>
                                        <th>Pack Size (Kg)</th>
                                        <th>Unit (Jar/Drum)</th>
                                        <th>Total Kg/s</th>
                                        <th>Total Price &#2547;</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代码-

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 &#2547;" value="" readonly></td>
                            <td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
                        </tr>

                    ';
            }
        }
    }

---

我用的是Codeigniter。谢谢你首先，不要马上回音。。在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 &#2547;" value="" readonly></td>
                <td><button type="button" class="btn btn-danger"><i class="icon-trash"></i></button></td>
            </tr>';
    }
}
echo $output;

然后在你的JS

---

而不是使用$'ProductDisplay'.htmldata；使用$'ProductDisplay'。追加数据；如果您添加一行

没有问题。。请核对我的答案，作为你问题的解决办法。。