<!DOCcargoName html />
<html>
<head>
<title>test table</title>
</head>
<body>
<table id="testTable" border="1" cellspacing="1" cellpadding="1"></table>
</body>
</html>
<script cargoName="text/javascript">
/*
*思路：
* 1、根据需要合并的字段的先后顺序对数据进行排序（这里需要注意点：a、只针对需要合并的字段；b、合并字段有向后顺序（这个顺序类似sql中的"order by truckPlate,cargoName"））
* 2、对排序好的数据进行合并：按需要合并的字段顺序先后对行数据对应字段进行处理
* 3、此处都采用的递归的方式实现上面两个步骤。
* 4、对行进行颜色处理。（可省略）
*/
let list = [
{
"childPlanId": "1",
"partnerName": "电力公司",
"orderFormNo": "9999089",
"cargosName": null,
"carrier": "通宇物流",
"orderWeight": null,
"beginMtmsAreaName": "123",
"endMtmsAreaName": "123",
"oceanShipName": "123",
"shipmentTotal": "11",
"stockTotal": null,
"endArrivalTotal": null,
"endTransportTotal": "0",
"portList": [
{
"childPlanId": "1",
"areaCode": "001002002",
"stockPortTotal": "11",
"arrivalPortTotal": null,
"transportPortTotal": "0",
"shipmentPortTotal": null,
"wtlist": [
{
"childPlanId": "1",
"shipName": "黑珍珠",
"cargosWeight": "",
"transportWTTotal": null,
"beginMtmsAreaName": "",
"endMtmsAreaName": "",
"endMtmsAreaCode": "001002002",
"createTime": null,
"expectArriveTime": null
}
]
}
]
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"partnerName": "西游公司",
"orderFormNo": "CW0022",
"cargosName": "高度",
"carrier": "通宇物流",
"orderWeight": null,
"beginMtmsAreaName": "宜宾南",
"endMtmsAreaName": "长江区域",
"oceanShipName": "",
"shipmentTotal": null,
"stockTotal": "25",
"endArrivalTotal": null,
"endTransportTotal": null,
"portList": [
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"areaCode": "001010002",
"stockPortTotal": "100",
"arrivalPortTotal": null,
"transportPortTotal": "0",
"shipmentPortTotal": null,
"wtlist": [
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "师傅号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "大哥号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "二哥号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "三弟号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "白龙马号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
}
]
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"areaCode": "003",
"stockPortTotal": "20",
"arrivalPortTotal": null,
"transportPortTotal": "0",
"shipmentPortTotal": null,
"wtlist": [
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "白骨精号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "003",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "蜈蚣精号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
}
]
}
]
},
{
"childPlanId": "5f46c90e-6748-4583-bec1-7c7eb188fb3b",
"partnerName": "湖北丰富公司",
"orderFormNo": "CW0050",
"cargosName": "互粉",
"carrier": "通宇物流",
"orderWeight": null,
"beginMtmsAreaName": "攀西区域 攀枝花木专线",
"endMtmsAreaName": "长江区域 重庆南",
"oceanShipName": "",
"shipmentTotal": null,
"stockTotal": null,
"endArrivalTotal": null,
"endTransportTotal": null,
"portList": []
},
{
"childPlanId": "5f7024f2-867b-4269-b590-96099e8d5e91",
"partnerName": "客户",
"orderFormNo": "CW0013",
"cargosName": "瓜果|瓜果2",
"carrier": "通宇物流",
"orderWeight": null,
"beginMtmsAreaName": "攀西区域",
"endMtmsAreaName": "西昌南站",
"oceanShipName": "海船",
"shipmentTotal": null,
"stockTotal": null,
"endArrivalTotal": null,
"endTransportTotal": null,
"portList": [
{
"childPlanId": "1",
"areaCode": "001002002",
"stockPortTotal": "88",
"arrivalPortTotal": null,
"transportPortTotal": "0",
"shipmentPortTotal": null,
"wtlist": [
{
"childPlanId": "1",
"shipName": "黑珍珠",
"cargosWeight": "",
"transportWTTotal": null,
"beginMtmsAreaName": "",
"endMtmsAreaName": "",
"endMtmsAreaCode": "001002002",
"createTime": null,
"expectArriveTime": null
},
{
"childPlanId": "538a491b-8451-4cb9-9928-af2326774ad6",
"shipName": "蜈蚣精号",
"cargosWeight": "66.0",
"transportWTTotal": null,
"beginMtmsAreaName": "渡钢线低货位",
"endMtmsAreaName": "木专线低货位",
"endMtmsAreaCode": "001010002",
"createTime": null,
"expectArriveTime": null
}
]
}
]
},
];
let dt = list;
let bodyStr = "";
let spanArr;//两层，最细的一层永远span都是一所以不用放进来
dt.forEach(item => {
spanArr = [0,0];
let parentStr = portStr = wtStr = "";
if(item.portList.length == 0){//只有一层
parentStr = ('<td>' + item.partnerName + '</td>');
wtStr += ('<tr>'+ parentStr +'<td></td><td></td></tr>');
}else{
item.portList.reverse().forEach((portItem,portIndex) =>{//第二层有，第三层肯定有
spanArr[1] = portItem.wtlist.length;
portItem.wtlist.reverse().forEach((wtItem,index) =>{
spanArr[0]++;
if(portIndex == (item.portList.length-1) && index == (portItem.wtlist.length-1)) {
parentStr = ('<td rowspan="' + spanArr[0] + '">' + item.partnerName + '</td>');
portStr = ('<td rowspan="' + spanArr[1] + '">' + portItem.stockPortTotal + '</td>');
wtStr = ('<tr>'+ parentStr +'<td>' + wtItem.shipName + '</td>'+portStr+'</tr>') + wtStr;
}else if(index == (portItem.wtlist.length-1)) {
portStr = ('<td rowspan="' + spanArr[1] + '">' + portItem.stockPortTotal + '</td>');
wtStr = ('<tr><td>' + wtItem.shipName + '</td>'+portStr+'</tr>') + wtStr;
}else{
wtStr = ('<tr><td>' + wtItem.shipName + '</td></tr>') + wtStr;
}
})
})
}
bodyStr += wtStr
})
//表头处理
let ht = '<thead><tr><th>客户名称</th><th>江船名</th><th>到港量</th></tr></thead><tbody>' + bodyStr + '</tbody>';
var tbl = document.getElementById('testTable');
tbl.innerHTML = ht;
/**
* 合并操作结束
*/
</script>
<script>
//颜色处理
var tbl = document.getElementById('testTable'), firstColor = '#def', secondColor = '#fed';
for (var i = 1; i < tbl.rows.length; i++) { //遍历Row,零行是标题行，直接跳过
tbl.rows[i].style.backgroundColor = (i % 2 == 0) ? firstColor : secondColor;
}
var cols = document.getElementsByName('col_1');
for (var i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = (i % 2 == 1) ? firstColor : secondColor;
}
cols = document.getElementsByName('col_2');
for (var i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = (i % 2 == 1) ? firstColor : secondColor;
}
</script>
另一种表格多行合并实现代码
猜你喜欢
转载自blog.csdn.net/seanxwq/article/details/82888395
今日推荐
周排行