如何爲以前的行組創建「總計」列

如果我有一個表，並且每行中的每個行都有一個數量，那麼我將如何顯示行組的總和？
實施例：
A 100
A 100
A 100
B 120如何爲以前的行組創建「總計」列

我試圖創建具有300（100 + 100 + 100），這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>

來源

2013-12-17 Jim

你確定這是做這種複雜的東西來計算你的總和的正確方法嗎？是不是可以在服務器端做到這一點，只是用JS顯示結果？ – sdespont

@sdespont：我不想真正計算總和。原本我想，但它太複雜了。我只想顯示我可以預先計算的總和。因此它只是一個顯示問題。除非有更好/更簡單的選項來顯示總和 – Jim

我不確定，但這可能是對齊問題。在你的桌子上設置border="1"，你就會明白爲什麼。

嘗試：

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

來源

2013-12-17 22:21:58

它需要'valign =「top」'。設置邊界對此有幫助。但它適用於此特定集合。如果我有奇數/甚至行來總結我不認爲這項工作 – Jim

不知道你的問題是什麼，但這裏是獲取細胞的SUMM一個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

來源

2013-12-17 23:28:15 Pavlo

爲什麼它關係，如果表是排序或不？ – Jim

@Jim這是我的算法的工作原理：如果它在第一個單元格中遇到新名稱，它將創建新的組。查看未排序表的示例：http://jsbin.com/iSATiMus/4/edit?html,js,output – Pavlo

如何爲以前的行組創建「總計」列

回答

相關問題