php - 通过 ajax 将表格行作为 HTML 代码返回并添加到表格中

Question

我正在编写一个应用程序，该应用程序根据id从数据库中获取数据。给定并返回表中的行，它是一个条形码计费模块，它 .append行作为给定的条形码字符串，但是当我返回表 row as a HTML 时我面临的问题代码<tr>..</tr> ，通过ajax我看不到在我的 table 上打印(添加)的新表格行。

这是我的观点:

 <table class="table table-bordered">


              <thead>
                <tr>
                  <th>S No.</th>
                  <th>Particular</th>
                  <th>QTY</th>
                  <th>Cost</th>
                <th>Discount</th>
                <th>Discard</th>


                </tr>
              </thead>

               <tbody class="todo_list">
               <?php echo $list;?>
             <input type="hidden" name="bill_ref" value="<?php echo $bill_ref ?>"/>
             <input type="hidden" name="date" value="<?php echo $date ?>"/>

               </tbody>
               <?php echo $total_bill; ?> 

                <div id="bill_tbl">
                      <--!MY NEW ROW SUPPOSED TO BE ADDED HERE!-->
            </div>
            </table>

我的ajax JS:

 <script type="text/javascript">
$(document).ready(function(){


               $("#c_id").change(function(){
                     var send_data=$("#c_id").val();
                     $.ajax({
                        type:"post",
                        url:"billing_table",
                        dataType: "html",

                        data:"i_id_post="+send_data,
                        success:function(data){
                              $("#bill_tbl")..after(data);

                        }

                     });
               });
           });
</script>

和我的 Controller (出于测试目的，我正在 Controller 中操作我的数据库部分，对此我感到抱歉):

public function billing_table()
    {
    $b_barcodestring=$this->input->post('b_barcodestring');
    $i_id=$this->input->post('i_id_post');
    if($i_id==''&& $b_barcodestring!='')
    {

    echo $b_barcodestring;

    }
    else if($b_barcodestring=='' && $i_id!='' )
    {


    //i want to print sumple this dummy row in my table
    echo '<tr ><input type="hidden" name="counter[]" value="ssss"></tr><tr ><td>+counter+</td>  <input type="hidden" name="particular[]" value="Greting Card" ><td>'.$i_id.'</td>  <td>  <input type="number" name="qty[]" value="+qty_cal+"></td> <td> <input type="hidden" name="cost[]" value="150" >150</td> <td><input type="hidden" name="discount[]" value="N/A">N/A</input></td> <td ><button class="btn btn-danger"><i class="icon-remove icon-white"></i>Delete</button></td></tr>';
    }

    $this->output->enable_profiler(TRUE);
    }

这是FIDDLE .

Answer 1

更改 JS 函数中的以下行

success:function(data){
      //$("#bill_tbl")..after(data);
      $(".table").append(data);
}

从表中删除 div#bill_tbl