图例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table tr td{
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<table id="demoTable">
<tr>
<td>一班</td>
<td>大蜘蛛</td>
<td>男</td>
<td>北京</td>
<td>雨纷纷</td>
<td>已毕业</td>
</tr>
<tr>
<td rowspan="4">二班</td>
<td>小兔子</td>
<td>男</td>
<td>武汉</td>
<td>雨纷纷</td>
<td>已毕业</td>
</tr>
<tr>
<td>小乌龟</td>
<td>男</td>
<td>广州</td>
<td>雨纷纷</td>
<td>已毕业</td>
</tr>
<tr>
<td>小乌龟</td>
<td>男</td>
<td>广州</td>
<td>雨纷纷</td>
<td>已毕业</td>
</tr>
<tr>
<td>小乌龟</td>
<td>男</td>
<td>广州</td>
<td>雨纷纷</td>
<td>已毕业</td>
</tr>
</table>
<script>
var dataArray = [{
"order_id": "511511",
"order_sn": "2018011990875301010",
"add_time": "2018-01-19 17:32:25",
"order_status": "确认",
"distributor_id": "1",
"username": "18620381207",
"mobile": "18620381207",
"order_amount": "115.00",
"commission": "0.00",
"reward_commission": "0.00",
"commission_status": "待支付",
"settle_plan_time": "",
"id_name_price": [{
"product_id": "178",
"product_name": "小玩具",
"price": "100.00",
"ticket_id": "177"
}]
}, {
"order_id": "511510",
"order_sn": "2018011949312201010",
"add_time": "2018-01-19 17:31:37",
"order_status": "确认",
"distributor_id": "1",
"username": "18620381207",
"mobile": "18620381207",
"order_amount": "115.00",
"commission": "0.00",
"reward_commission": "0.00",
"commission_status": "待支付",
"settle_plan_time": "",
"id_name_price": [{
"product_id": "178",
"product_name": "小玩具",
"price": "100.00",
"ticket_id": "177"
}]
}, {
"order_id": "511486",
"order_sn": "2018011879006101010",
"add_time": "2018-01-18 10:42:13",
"order_status": "确认",
"distributor_id": "3",
"username": "okMFZv5IINtspLoF7t3rElfewWSY",
"mobile": "13510475319",
"order_amount": "0.00",
"commission": "0.00",
"reward_commission": "0.00",
"commission_status": "已结算",
"settle_plan_time": "",
"id_name_price": [{
"product_id": "79339",
"product_name": "周杰伦地表最强bate1（测试排期，不要改动）",
"price": "480.00",
"ticket_id": "381669"
}, {
"product_id": "79339",
"product_name": "周杰伦地表最强bate1（测试排期，不要改动）",
"price": "400.00",
"ticket_id": "381681"
}, {
"product_id": "79339",
"product_name": "周杰伦地表最强bate1（测试排期，不要改动）",
"price": "480.00",
"ticket_id": "381682"
}]
}];
var tableHtml = ‘‘;
for(var i=0;i<dataArray.length;i++){
if(dataArray[i].id_name_price.length<=1){
tableHtml += ‘<tr>‘;
tableHtml += ‘<td>‘+ dataArray[i].order_sn +‘</td>‘;
tableHtml += ‘<td>‘+ dataArray[i].add_time +‘</td>‘;
tableHtml += ‘<td>‘+ dataArray[i].order_status +‘</td>‘;
tableHtml += ‘<td>‘+ dataArray[i].id_name_price[0].product_name +‘</td>‘;
tableHtml += ‘<td>‘+ dataArray[i].id_name_price[0].price +‘</td>‘;
tableHtml += ‘<td>‘+ dataArray[i].id_name_price[0].ticket_id +‘</td>‘;
tableHtml += ‘</tr>‘;
}else{
tableHtml += ‘<tr>‘;
tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].order_sn + ‘</td>‘;
tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].add_time + ‘</td>‘;
tableHtml += ‘<td rowspan="‘ + dataArray[i].id_name_price.length + ‘">‘ + dataArray[i].order_status + ‘</td>‘;
tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].product_name + ‘</td>‘;
tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].price + ‘</td>‘;
tableHtml += ‘<td>‘ + dataArray[i].id_name_price[0].ticket_id + ‘</td>‘;
tableHtml += ‘</tr>‘;
var unitArray = dataArray[i].id_name_price;
for(var j=1;j<unitArray.length;j++){
tableHtml += ‘<tr>‘;
tableHtml += ‘<td>‘ + unitArray[j].product_name + ‘</td>‘;
tableHtml += ‘<td>‘ + unitArray[j].price + ‘</td>‘;
tableHtml += ‘<td>‘ + unitArray[j].ticket_id + ‘</td>‘;
tableHtml += ‘</tr>‘;
}
}
}
var tableEl = document.getElementById(‘demoTable‘);
tableEl.innerHTML = tableHtml;
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/lw5116/p/8513256.html
时间： 2024-08-29 04:38:22