javascript - 如何合并具有相同值的单元格

Question

我有这个表，我需要在“周”列中合并具有相同值的单元格。 下面是我现在得到的输出表:

Week    Project     OS      TotalTests  #cycle of run 
1        P1        ABC     0                 0
1        P2       XYZ     4799               1

我希望输出类似于( 1 应放置在单元格的中心):

  Week  Project     OS      TotalTests  #cycle of run 
    1        P1        ABC     0                 0
             P2       XYZ     4799               1

这是代码:

function BindTable(startWW, endWW, selPhaseNumber, selctedYear) {
        var url = webApiUrl + .....

        $('#GraphTable > tbody > tr ').remove();
        $.ajax({
            url:url,
            type: "Get",
            dataType: "json",
            data: { .... },
            crossDomain: true,
            success: function (data) {
                if (data.length > 0) {


                    var tr;
                    for (var i = 0; i < data.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + data[i].WW + "</td>");

                        tr.append("<td>" + data[i].Project + "</td>");

                        tr.append("<td>" + data[i].OS + "</td>");

                        tr.append("<td>" + data[i].TotalTests + "</td>");

                        tr.append("<td>" + data[i].CycleRun + "</td>");

                        $('#GraphTable').append(tr);
                    }

                }
                else {
                    tr = $('<tr/>');
                    tr.append("<th colspan='10' style='text-align:center'>No Data to display</th>");

                    $('#GraphTable').append(tr);
                }
            }
        });
    }

有什么帮助吗？

Answer 1

您可以使用 rowspan 属性组合单元格。问题:如果从头开始循环数据，您不知道 rowspan 属性的正确值，因为它必须放置在第一个 td 元素中!

解决方案:从尾到头循环:

function success(data) {
  if (data.length > 0) {
    var oldValue = data[data.length-1].WW,
        c=1;
    for (var i = data.length-1; i >= 0; i--) {
      let $tr = $('<tr/>');
      if(i==0 || oldValue != data[i-1].WW) {
        $tr.append("<td rowspan=\""+c+"\">" + data[i].WW + "</td>");
        c = 1;
        if(i>0) oldValue = data[i-1].WW;
      } else {
        c++;
      }
      $tr.append("<td>" + data[i].Project + "</td>");
      $tr.append("<td>" + data[i].OS + "</td>");
      $tr.append("<td>" + data[i].TotalTests + "</td>");
      $tr.append("<td>" + data[i].CycleRun + "</td>");
      $('#GraphTable').prepend($tr);
    }
  } else {
    let $tr = $('<tr/>');
    $tr.append("<th colspan='5' style='text-align:center'>No Data to display</th>");
    $('#GraphTable').append($tr);
  }
}

正在工作 fiddle

编辑:正在工作fiddle带标题

更改了循环顺序和命名约定。