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-attribute的正确值，因为它必须放在第一个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

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

Answer 2

如果您跟踪最后一个DataWW，您可以打印它。您只需要在最后一个DataWW与当前DataWW不同时进行打印。您可以像这样调整for循环：

var tr;
var lastDataWW = null
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  if (lastDataWW != data[i].WW) {
    tr.append("<td>" + data[i].WW + "</td>");
  else {
    tr.append("<td> </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);

  lastDataWW = data[i].WW
}

正如Santi在评论下面所说，如果你在样式表中添加这个css，你可以将第一列放在中心位置。

/* CSS */
#GraphTable tr td:first-child { 
  text-align: center;
}

如何合并具有相等值的单元格

2 个答案: