多行表格不会创建PHP/Ajax

Question

我正在创建产品采购表单。我需要创建多个表格行。我的意思是当我选择一个产品时，它应该创建一个新的行，但它只会创建一行。请检查图像 - 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 &#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> 

        '; 
      } 
     } 
    } 

我用笨。谢谢

Answer 1

首先，不要马上呼应..您在PHP循环做到这一点..

$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').html(data);使用$('#ProductDisplay').append(data);如果你增加一排