將表格行作爲HTML代碼通過ajax添加到表格中

我正在編寫一個應用程序，它基於id給出的基礎上從數據庫中提取數據並返回表中的行，它是一個條形碼計費模塊，它.append該行作爲條形碼字符串給出，但我面臨的問題，當我正在返回表row as a HTML代碼<tr>..</tr>，通過ajax我看不到新表格行打印（添加）在我的表上。將表格行作爲HTML代碼通過ajax添加到表格中

這是我的觀點：

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

來源

2013-08-05 user2652367

，而不是$（」 #bill_tbl「）.. after（data）try $（」＃bill_tbl「）。after（data） –

@VinodLouis：ya我嘗試了額外的」。「是我的打字錯誤，它仍然不起作用 – user2652367

我不認爲你可以在tbody或thead之外的表格中添加一行，我的意思是我認爲它不會是w3c c沒有依從，但不確定它是否是問題的根源。你應該真的考慮檢查你的輸出佈局imho。 – nubinub

變化在JS功能

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

以下行從表中刪除在div＃bill_tbl

來源

2013-08-05 08:51:43

thanx尋求幫助，但它仍然不能正常工作 – user2652367

你有沒有檢查過你是否從'ajax'得到了正確的答案？檢查你的控制檯是否收到了迴應？ –

你在'jsfiddle'中做了什麼，改成'$（「。todo_list」）。append（data）;' –

它應該是

$("#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); 

    }

}）;

來源

2013-08-05 08:55:46

可以用JSON來完成嗎？怎麼樣？ – user2652367

你可以改變的div表，並嘗試這種將工作

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

工作撥弄here

在你的情況改變這個div（bill_tbl）表

來源

2013-08-05 09:04:23

我不是編碼添加單擊行，我想獲得從ajx返回的行 – user2652367

只是使用函數內返回的HTML字符串作爲參數，如果您的數據成功是一個有效的HTML字符串，它將追加只是確保其一個表 –

可以用JSON來完成嗎？怎麼樣？ – user2652367

將表格行作爲HTML代碼通過ajax添加到表格中

回答

相關問題