1. 程式人生 > >table根據後臺資料動態載入行

table根據後臺資料動態載入行

html:

<table id="detailTable">
 <thead>
  <tr>
   <th></th>
   <th>合同編號</th>
   <th>合同檔案</th>
   <th>供應商</th>
   <th>當前剩餘量</th>
   <th>數量</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

jq:

$(function(){

 add_detail(PROD_ID);

})

var newAddId = 0;
function add_detail(PROD_ID){
    var add_id;
    add_id = 'add_'+newAddId;
    newAddId++;
    $.ajax({
        type: "get",
        dataType: "json",
        async: false,  //同步
        url: "${base}/purchase/getStockList",
        data: {
         PROD_ID: PROD_ID
       },
       success: function (data) {
            var str = "";
            var json = eval(data);
            $.each(json, function (index, item) {  
                //迴圈獲取資料    
                str += '<tr>' +   
                    '<td><input id="CONTRACT_ID_'+add_id+'" type="checkbox" value=""></td>' +  
                    '<td>' + json[index].CONTRACT_NUM + '</td>' +  
                    '<td>' + json[index].CONTRACT_ID_+"."+json[index].EXTEND + '</td>' +  
                    '<td>' + json[index].SUP_ID_ + '</td>' + 
                    '<td>' + json[index].LEFT_NUM + '</td>' +  
                    '<td><input id="NEED_NUM_'+add_id+'" class="form-control" value="0"></td>' +  
                    '</tr>';   
            }); 
            $("#detailTable tbody").prepend(str);
        },
        error: function (data) {
        }
    });
}

效果: