您的位置：首页 > Web前端 > JavaScript

JavaScript动态生成table中的数据

2016-11-25 17:53 288 查看 
<!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动态加载后台json JavaScript动态生成table中
相关文章推荐
新的分享
章节导航