javascript - 将 parent 上方的每一行与 parent /子女合并？

我有一个HTML表，该表的左列（父类）和右列/行（子类）。第一列跨越几行，而右侧则没有。我正在尝试将父级上方的每一行合并到其下方的父级中。示例：组1上方的小计与组1合并，而不是其自己的行。有点奇怪的解释，所以这是我的jsfiddle链接：https://jsfiddle.net/khemikal/ry5p4842/

这是我的功能：

 $(document).ready(function() {
    $(".parent").each(function(index, element) {
      var subTotal1 = 0;
      var subTotal2 = 0;
      var subTotal3 = 0;
      var numRows = parseInt($(this).attr("rowspan"));
      var firstRow = $(this).parent();
      var currentRow = firstRow;
      for (i = 0; i < numRows; i++) {
        subTotal1 += parseInt($(currentRow.children(".child")[0]).text());
        subTotal2 += parseInt($(currentRow.children(".child")[1]).text());
        subTotal3 += parseInt($(currentRow.children(".child")[2]).text());
        currentRow = currentRow.next("tr");
      }
      firstRow.before('<tr><td></td><td class="sub0">Sub Total</td><td class="sub1">' + subTotal2 + '</td><td class="sub2">' + subTotal3 + '</td></tr>');
    });
  });

任何帮助或建议，以实现这一目标将不胜感激。

最佳答案

我已经接受了您的代码，并只是对其进行了重新排列。

我将tr放在最后，但是，可以很容易地将其移回顶部。

您想要做的是扩展组的行范围。由于您已经有了numRows变量，因此我只向其添加了1，然后将其重新应用于该组。

编辑以使其适用于多个组，我们必须确定每个组的lastRow。我已经使用命名变量完成了此操作。现在，我们可以确保在递增行的rowspan值之前，将小计附加到最后一行。

https://jsfiddle.net/vhzjwxkt/