Jquery AJAX obtains data dynamically and generates table examples

The following jquery Ajax code features are: request data and traverse the data, dynamically creating table elements to add to the page.

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 (' Wait ... ');
}
). Done (function (data) {
Tbbody = ';
tr = ' <th class= ' w75 > Product </th><th> activity time </th><th> Sales </th><th> coupon Amount </th ><th> Full Reduction </th><th> order number </th><th> after sales </th><th> after sales rate </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_na Me + "</a></td>" + "<td align= ' center ' >" + n.start_time + "-" + N.end_time + "</td>" + "<td Ali gn= ' 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=" Cente R ' > ' + n.return_rate + "</td></tr>";
$ ("#tbody_" +seller_id+ "_" +product_id). Empty (). HTML (TR). Append (Tbbody);
$ ("#s_" +seller_id+ ' _ ' +product_id). html (' view ');
});
});
}

The effect is as follows:

Clicking on the view will AJAX request all the items in the schedule and show that the PHP section is responsible for statistics and conversion to JSON format data.

Include: Ajax request data, get JSON data and traversal, dynamic append table tr,td elements, alternate colors and so on.

This example demonstrates the ability to dynamically create a table TR,TD and append the display to Ajax.