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 = '商品活动时间销售额优惠券金额满减金额订单数售后金额售后率';
        $.each(data, function(i, n) {
          if(i%2==1){
            class_html = ' class="tab_gre"';
          }else{
            class_html = '';
          }
          tbBody += '' + n.product_name + "" + "" + n.start_time + "-" + n.end_time + "" + "" + n.sale_total_amount + "" + "" + n.coupon_sale_total_amount + ""+ "" + n.discount_sale_total_amount + "" +"" + n.order_count + "" + "" + n.reject_total_amount + ""+ "" + n.return_rate + "";
          $("#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并追加显示的功能。