Javascript 使用 rowspan 和 tr 的循環表行

Question

我有需要在循環中使用我的 JS 自定義的表。

下面是演示。 我需要的最終結果是這樣的：

有什么技巧可以達到我需要的結果嗎？

 var jsonStr = {   "data": [     {       "data2": [         {           "partNo": "ABC",           "plan": "120"         },         {           "partNo": "DEF",           "plan": "50"         }       ],       "lineID": "1"     },     {       "data2": [         {           "partNo": "FAB",           "plan": "75"         }       ], "lineID": "2"     }   ] }; for(var i=0; i<jsonStr.data.length; i++) { var line = "LINE " + jsonStr.data[i].lineID; var element = `<tr><td>${line}</td></tr>`; $(".tbl1 tbody").append(element); for(var j=0; j<jsonStr.data[i].data2.length; j++) { var partNo = jsonStr.data[i].data2[j].partNo; //console.log(partNo); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tbl1" border="1"> <thead> <th>Line</th> <th>Part No.</th> </thead> <tbody></tbody> </table> <p> It should be like this: <table border="1"> <thead> <th>Line</th> <th>Part No.</th> </thead> <tbody> <tr> <td rowspan="2">LINE 1</td> <td>ABC</td><tr> <td>DEF</td> </tr> <tr> <td rowspan="1">LINE 2</td> <td>FAB</td> </tr> </tbody> </table>

Answer 1

這是一種在obj.data屬性上使用Array.forEach以使用rowspan策略提供目標表 tbody 的方法。

每次訪問新數組中的新條目時，都會創建一個新行，並為其賦予一個rowspan值，該值等於其自己的data2屬性數組 (partNo) 中的元素數。

然后對於每個 pf 那些，添加一個新行，從第二個開始，單獨保存當前的 partNo。

我沒有看到你在使用 jQuery 所以我選擇了 vanilla js。 無論如何，這是對此處面臨的主題的 MDN 參考：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-rowspan

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 var obj = {   "data": [ {  "lineID": "1", "data2": [{"partNo": "ABC","plan": "120"},{"partNo": "DEF","plan": "50"}], }, {       "lineID": "2", "data2": [{"partNo": "FAB","plan": "75"}], } ] }; //target tbody const tbody = document.querySelector('#tbl1 tbody'); //for each entry in obj.data obj.data.forEach( entry => { //create a new currentRow let currentRow = document.createElement('tr'); //create a cell for the current line and append it to the currentRow const tdLine = document.createElement('td'); tdLine.textContent = `LINE ${entry.lineID}`; if(entry.data2.length > 1) tdLine.setAttribute('rowspan', entry.data2.length); currentRow.append(tdLine); //for each partNo entry.data2.forEach( (part, i) => { //if the index of the current partNo is > 0, commit the currentRow and make a new one if(i > 0){ tbody.append(currentRow); currentRow = document.createElement('tr'); } //create the cell for the current partNo and append it to the currentRow const tdPart = document.createElement('td'); tdPart.textContent = part.partNo; currentRow.append(tdPart); }); //append the currentRow to the table tbody.append(currentRow); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbl1" class="tbl1" border="1"> <thead> <th>Line</th> <th>Part No.</th> </thead> <tbody></tbody> </table>

Answer 2

只需根據 data2 長度為第一組的第一個單元格設置行跨度。 然后用帶有 data2 的單個單元格渲染 rest 組的行。

 const jsonStr = { "data": [ { "data2": [ { "partNo": "ABC", "plan": "120" }, { "partNo": "DEF", "plan": "50" } ], "lineID": "1" }, { "data2": [ { "partNo": "FAB", "plan": "75" } ], "lineID": "2" } ] }; const tbody = $(".tbl1").find("tbody"); for(let i=0; i<jsonStr.data.length; i++) { const label = "LINE " + jsonStr.data[i].lineID; let tr = document.createElement("tr"); tbody.append(tr); let td = document.createElement("td"); td.innerHTML = label; td.rowSpan = jsonStr.data[i].data2.length; tr.appendChild(td); td = document.createElement("td"); td.innerHTML = jsonStr.data[i].data2[0].partNo; tr.appendChild(td); for(let j=1; j<jsonStr.data[i].data2.length; j++) { const partNo = jsonStr.data[i].data2[j].partNo; tr = document.createElement("tr"); tbody.append(tr); td = document.createElement("td"); td.innerHTML = partNo; tr.appendChild(td); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tbl1"> <tbody></tbody> </table>