使用Javascript在表格中添加標題行

Question

在我的解決方案中，數據從數據庫中提取並顯示在表格中。我想添加標題作爲階段1和階段2來分隔屬於每個階段的行。

目前表如下所示：

Week  Project  OS  TotalTests  #cycle 
    1  P1  Windows  0     0 
      P2  Linux,UFO 4799    1 
    1  P4  Android  10    10 

我想要的表是這樣的：

Week  Project  OS  TotalTests  #cycle 
          Phase 1 
    1  P1  Windows  0     0 
       P2  Linux,UFO 4799    1 

          Phase 2 
    1  P4  Android  10    10 

代碼： data.Phase是包含值1 & 2分貝領域。請幫忙嗎？

 let rows=[], nrows=data.length; 

     if (nrows > 0) { 

      let ww=data[0].WW, totalTests=0, totalCycles=0; 

      for (var i=0; i<nrows; i++) { 

       let row = '<tr>' + 
          '<td>' + 'WW- ' + data[i].WW + '</td>' + 
          '<td>' + data[i].Project + '</td>' + 
          '<td>' + data[i].OS + '</td>' + 
          '<td>' + data[i].TotalTests + '</td>' + 
          '<td>' + data[i].Run + '</td>' + 
          '</tr>'; 
       totalTests += parseInt(data[i].TotalTests); 
       totalCycles += parseInt(data[i].Run); 
       rows.push(row); 

       if ((data[i+1] && (data[i+1].WW != ww)) || !data[i+1]) { 
        rows.push('<tr class="totals"><td colspan="3">Total</td><td>' + totalTests + '</td><td>' + totalCycles + '</td></tr>'); 
        ww = data[i+1] ? data[i+1].WW : ''; 
        totalTests = 0; 
        totalCycles = 0; 
       } 
      } 
     } 
     else { 
      rows = ['<tr><th colspan="5" style="text-align:center">No Data to display</th></tr>']; 
     } 

     $('table#GraphTable tbody').html(rows.join('')); 

     // Create week rowspans. 
     $('table#GraphTable tbody tr.totals').each(function() { 
      var $weekRows = $(this).prevUntil('tr.totals'); 
      $weekRows.last().find('td').first().attr('rowspan',$weekRows.length); 
      $weekRows.not(':last').each(function() { 
       $(this).children('td').first().remove(); 
      }); 
     }); 
    } 
}) 

Answer 1

之前的循環開始，你可以這樣做下面

let header1Row = ""; 
let header2Row = ""; 
let header1Row = '<tr><td colspan="5" style="text-align:center">Phase 1</td></tr>'; 
rows.push(header1Row); 

// Meanwhile in the loop check for the phase value 
// if it is 2 
if (header2Row === "") { 
    let header2Row = '<tr><td colspan="5" style="text-align:center">Phase 2</td>/tr>'; 
    rows.push(header2Row); 
} 

// the above loop will run only one time