另一種表格多行合併實現程式碼
阿新 • • 發佈：2018-12-10
<!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>