<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="tabletest"> <table class="table table-hover"> <thead> <tr> <th>记录单号</th> <th>归属国家</th> <th>覆盖国家</th> <th>运营商</th> <th>卡数</th> <th>卡流量(GB)</th> <th>负责人</th> <th>状态</th> <th>最后编辑</th> <th>操作</th> </tr> </thead> <!--<tr>--> <!--<td>P20160615GB_006</td>--> <!--<td>GB</td>--> <!--<td>GB</td>--> <!--<td>EE</td>--> <!--<td>100</td>--> <!--<td>16.00</td>--> <!--<td>丁洁</td>--> <!--<td>已到卡</td>--> <!--<td>10-25 03:09</td>--> <!--<td>10-25</td>--> <!--</tr>--> </table> </div> <script src="js/jquery-2.2.3.min.js"></script> <script type="text/javascript"> jQuery(function ($) { var json = { tr: [{ class: "tr_data odd", id_data: "5", role: "row", td: [ { class: "td_purchase_no sorting_1", value: "P20160615GB_006" }, { class: "td_country_code", value:"AD" }, { class:"td_country_cover", value:"AD" }, { class:"td_operator_id", value:"2DEGREE" }, { class:"td_card_quantity", value:"50" }, { class:"td_card_dataquota", value:"5.00" }, { class:"td_supporter_id", value:"丁洁" }, { class:"td_process_state", value:"计划采购" }, { class:"td_modified", value:"10 天前" }, { class:"operating", value:"待定" } ] }, { class: "tr_data even", id_data: "7", role: "row", td: [ { class: "td_purchase_no sorting_1", value: "P20160615FR_006" }, { class: "td_country_code", value:"FR" }, { class:"td_country_cover", value:"FR" }, { class:"td_operator_id", value:"2DEGREE" }, { class:"td_card_quantity", value:"40" }, { class:"td_card_dataquota", value:"3.00" }, { class:"td_supporter_id", value:"丁洁" }, { class:"td_process_state", value:"计划采购" }, { class:"td_modified", value:"10 天前" }, { class:"operating", value:"待定" } ] } ], }; // // $.ajax({ // type: "POST", // url: "test.php", // dataType: "JSON", // success:function (txy) { // var data = eval ("(" + txt + ")"); // } // }); var trlength = json.tr.length; function gettabledata() { for (var i = 0; i < trlength; i++) { $("table").append("<tr class='" + json.tr[i].class + "' id_data = '" + json.tr[i].id_data + "' role = '" + json.tr[i].role + "'><td class='" + json.tr[i].td[0].class + "'>" + json.tr[i].td[0].value + "</td>" + "<td class='" + json.tr[i].td[1].class + "'>" + json.tr[i].td[1].value + "</td>" + "<td class='" + json.tr[i].td[2].class + "'>" + json.tr[i].td[2].value + "</td>" + "<td class='" + json.tr[i].td[3].class + "'>" + json.tr[i].td[3].value + "</td>" + "<td class='" + json.tr[i].td[4].class + "'>" + json.tr[i].td[4].value + "</td>" + "<td class='" + json.tr[i].td[5].class + "'>" + json.tr[i].td[5].value + "</td>" + "<td class='" + json.tr[i].td[6].class + "'>" + json.tr[i].td[6].value + "</td>" + "<td class='" + json.tr[i].td[7].class + "'>" + json.tr[i].td[7].value + "</td>" + "<td class='" + json.tr[i].td[8].class + "'>" + json.tr[i].td[8].value + "</td>" + "<td class='" + json.tr[i].td[9].class + "'>" + json.tr[i].td[9].value + "</td></tr>") } }; gettabledata(); }); </script> </body> </html>
JavaScript动态生成table中的数据
最新推荐文章于 2023-03-21 17:56:29 发布