Jquery AJAX擷取資料動態並產生表格例子

以下JQuery ajax代碼功能是：請求資料，並遍曆資料，動態建立表格元素添加到頁面。

function shop_detail(seller_id,shop_id,product_id){
    $.ajax({
        url: "__URL_SELLER__/popdata/ajaxDetailAction",
        method: "POST",
        dataType: "json",
        data: { seller_id: seller_id, shop_id: shop_id, product_id: product_id },
        beforeSend: function() {
          $("#s_"+seller_id+'_'+product_id).html('等待..');
        }
      }).done(function(data) {
        tbBody = '';
        tr = '<th class="w75">商品</th><th>啟用時間</th><th>銷售額</th><th>優惠券金額</th><th>滿減金額</th><th>訂單數</th><th>售後金額</th><th>售後率</th>';
        $.each(data, function(i, n) {
          if(i%2==1){
            class_html = ' class="tab_gre"';
          }else{
            class_html = '';
          }
          tbBody += '<tr' + class_html + '><td align="left"><a href="'+ n.url +'" target="_blank">' + n.product_name + "</a></td>" + "<td align='center'>" + n.start_time + "-" + n.end_time + "</td>" + "<td align='center'>" + n.sale_total_amount + "</td>" + "<td align='center'>" + n.coupon_sale_total_amount + "</td>"+ "<td align='center'>" + n.discount_sale_total_amount + "</td>" +"<td align='center'>" + n.order_count + "</td>" + "<td align='center'>" + n.reject_total_amount + "</td>"+ "<td align='center'>" + n.return_rate + "</td></tr>";
          $("#tbody_"+seller_id+"_"+product_id).empty().html(tr).append(tbBody);
          $("#s_"+seller_id+'_'+product_id).html('查看');
        });
      });
}

效果如下：

點擊查看會ajax請求該檔期內的所有商品並展現，PHP部分負責統計並轉換成json格式資料。

包括：ajax請求資料，擷取json資料並遍曆，動態追加表格tr,td元素，隔行換色等。

本樣本示範了ajax動態建立表格tr，td並追加顯示的功能。