Question

如果我有一张桌子并且每行都有一个金额，我将如何显示行组的总和？
例如：
A 100
A 100
A 100
B 120

我正在尝试创建第三列，在这些100/100/100单元格的中间有300（100 + 100 + 100），以便清楚第三列中每个单元格中的数字是以前的总和。
我尝试使用rowspan但它不起作用。我怎样才能做到这一点？示例：

<html>  
<body>  
<table>  
    <tr>  
        <td>A</td>  
        <td>B</td>  
        <td>100</td>  
    </tr>  
    <tr>  
        <td>A</td>  
        <td>B</td>  
        <td>100</td>  
        <td rowspan="2">$300</td>  
    </tr>  
    <tr>  
        <td>A</td>  
        <td>B</td>  
        <td>100</td>  
    </tr>  
    <tr>  
        <td>C</td>  
        <td>B</td>  
        <td>100</td>  
    </tr>   
</table>  
</body>  
</html>

Answer 1

我不确定，但这可能是对齐问题。在桌面上设置border="1"，您就会知道原因。

尝试：

<td rowspan="2" valign="bottom">$300</td>

Answer 2

不确定您的问题究竟是什么，但这是一个JS OOP解决方案，用于获取单元格的总和（假设您的表已排序）：

(function () {
  // Helper
  function $(selector) {
    return Array.prototype.slice.call(document.querySelectorAll(selector));
  }

  function Group(name, row) {
    this.name = name;
    this.summ = 0;
    this.length = 0;
    this.cell = document.createElement('td');

    row.appendChild(this.cell);
  }

  Group.prototype._update = function () {
    this.cell.textContent = this.summ;
    this.cell.setAttribute('rowspan', this.length);
  };

  Group.prototype.add = function (value) {
    this.summ += value;
    this.length++;

    this._update();
  };

  var group = null;

  $('#summup tr').forEach(function (row) {
    var name = row.children[0].textContent;
    var value = parseFloat(row.children[1].textContent, 10);

    if (!group || group.name !== name) {
      group = new Group(name, row);
    }

    group.add(value);
  });
})();

演示：http://jsbin.com/iSATiMus/3/edit?html,js,output

如何为前一行组创建“总和”列

2 个答案: