使用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 是在 db 中包含值 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