Question

我有一个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>');
    });
  });

任何有关实现这一目标的帮助或建议都将受到赞赏。

Answer 1

我发表了评论，但我还没有足够的代表。

我认为您需要提供更多信息。我不确定为什么你会使用.before如果你想把它放在一个特定的地方。我也不确定你为什么要用这种方式组织父子结构。如果由我来组织它，我会使用数据属性将它们组合在一起，或者其他一些属性（因为这超出了正常的DOM父子关系）。

听起来你需要遍历行，而不是父母。那时，我会组织父母＆gt;子结构基于使用.hasClass检查的行的顺序。

给我更多信息，我会尽力帮助，我会修改这个答案。

Answer 2

我已经接受了你的代码，只是重新安排了它。

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

您想要做的是扩展群组的行数。由于您已经拥有numRows变量，因此我只需将其添加1并将其重新应用于该组。

修改以使其适用于多个群组，我们必须确定每个群组的lastRow。我用命名变量做了这个。现在，我们可以确保在递增行的rowspan值之前将小计附加到最后一行。

https://jsfiddle.net/vhzjwxkt/

将父级/子级上方的每一行合并到父级上方？

2 个答案: