通过ajax和外接程序表将表行作为HTML代码返回


Return table row as a HTML code via ajax and add in table

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

这是我的观点:

 <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>

和我的控制器(出于测试目的,我正在控制器中操作我的DB部分,对此我感到抱歉):

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。

更改JS函数中的以下行

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

从表中删除div#bill_tbl

应该是

$("#c_id").change(function(){
    var send_data=$("#c_id").val();
    var b_barcodestring = $("#b_id").val(); //your barcodestring , I just supplement it cannot find where you getting it
    $.ajax({
    type:"post",
    url:"billing_table",
    dataType: "html",
    data:{
      i_id_post : send_data, //This is the correct format for your data to send
      b_barcodestring : b_barcodestring
    },
    success:function(data){
      $("#bill_tbl").append(data);
    }

});

您可以将div更改为table并尝试此操作,它将在中工作

 function addrow(){
     $("#mytable").after("<tr><td>1</td><td>1</td><td>1</td></tr>");
 }

在您的情况下,将此div(bill_tbl)更改为表