Javascript

Question

使用 JavaScript，我如何向 HTML table 添加新行，对第二行之后的值求和。

下面是上面描述的一个例子：

预期结果：

这是 html 标记：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<!DOCTYPE html>
<html>
<body>

<table border="1" style="width:100%">
  <tr>
    <td>Branch</td>
    <td>Division</td>
    <td>TallyA</td>
    <td>TallyB</td>
    <td>TallyC</td>
  </tr>
  <tr>
    <td>Alpha</td>
    <td>A101</td>
    <td>6</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Bravo</td>
    <td>B102</td>
    <td>16</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>C103</td>
    <td>11</td>
    <td>17</td>
    <td>21</td>
  </tr>
</table>


</body>

</html>
</body>

</html>

Answer 1

与 jQuery:

$("table").each(function() {
  var $table = $(this);
  $row = $("<tr>")
  $row.append("<td>Totale</td>")
  var sums = [];
  $table.find("tr").each(function(){
    var index = 0;
    $(this).find("td").each(function() {
      if (!sums[index]) sums[index] = 0;
      sums[index] += parseInt($(this).html());
      index++;
    })
  })
  for(var i=1;i<sums.length;i++) {
    var el = sums[i];
    if (isNaN(el)) el = "";
    $row.append("<td>"+el+"</td>")
  }
  $table.append($row)
})

jsFiddle

Answer 2

这是我的解决方案。它可能看起来很冗长，但这对于这项任务的复杂性来说是必要的。

首先，我引用了按钮和 table 元素。为了防止重复点击会添加更多行并破坏代码，我创建了一个布尔变量来检查行是否已经求和。该代码仅在 if(!summedItems) 条件中第一次运行。

然后我为 table 中的所有五列创建了新的 td 元素，并为除第一部分以外的所有列创建了文本节点。

然后我创建了选择器，这就是它变得棘手的地方。第一行不包含数值，所以我不得不进一步查询第二行的所有行。我用 tr:nth-child(n+2) 做到了。

然后我需要在每一行中找到第三个单元格。为此可以使用后代或子选择器。完整的选择器是 tr:nth-child(n+2) td:nth-child(3)。对接下来的两个重复，只增加 td:nth-child.

中的值

由于我们需要遍历所有这些值，我创建了三个单独的数组来分别存储第三、第四和第五列中的值。重要的是要注意这些值是字符串类型，需要将它们转换为整数。为此，只需在字符串前添加一个 + 符号。遍历每个查询中的元素数量，我填充了数组。

现在我们需要将所有这些项目相加，我们可以使用 reduce 方法来完成。

现在将文本节点添加到单元格，将单元格添加到行，最后将行添加到 table。最后，将 summedItems 变量设置为 true 以防止疯狂行为。

var button = document.getElementById("total-items");
var table = document.getElementById("my-table");

var summedItems = false;

function sumItems() {
    if (!summedItems) {
        var row = document.createElement("tr");
        var branch = document.createElement("td");
        var division = document.createElement("td");
        var tallyA = document.createElement("td");
        var tallyB = document.createElement("td");
        var tallyC = document.createElement("td");
        var branchText = document.createTextNode("Total");

  
        var sumA = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(3)");
        var sumB = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(4)");
        var sumC = document.querySelectorAll("tr:nth-child(n+2) td:nth-child(5)");
  
        var aSums = [], bSums = [], cSums = [];
    
        for (var i = 0; i < sumA.length; i++) {
            aSums.push(+(sumA[i].innerHTML));
        }
  
        for (var i = 0; i < sumB.length; i++) {
            bSums.push(+(sumB[i].innerHTML));
        }
  
        for (var i = 0; i < sumC.length; i++) {
            cSums.push(+(sumC[i].innerHTML));
        }
  
        aSums = aSums.reduce((a,b) => a + b)     
        bSums = bSums.reduce((a,b) => a + b)
        cSums = cSums.reduce((a,b) => a + b)
  
        var tallyAText = document.createTextNode(aSums);
        var tallyBText = document.createTextNode(bSums);
        var tallyCText = document.createTextNode(cSums);
  
        branch.appendChild(branchText);

        tallyA.appendChild(tallyAText);
        tallyB.appendChild(tallyBText);
        tallyC.appendChild(tallyCText);
        
      [branch, division, tallyA, tallyB, tallyC].forEach((e) => row.appendChild(e)
        )

        table.appendChild(row);
        summedItems = true;
    }
}

button.addEventListener("click", function() {
    sumItems();
});

<table id="my-table" border="1" style="width:100%">
  <tr>
    <td>Branch</td>
    <td>Division</td>
    <td>TallyA</td>
    <td>TallyB</td>
    <td>TallyC</td>
  </tr>
  <tr>
    <td>Alpha</td>
    <td>A101</td>
    <td>6</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Bravo</td>
    <td>B102</td>
    <td>16</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>C103</td>
    <td>11</td>
    <td>17</td>
    <td>21</td>
  </tr>
</table>

<button id="total-items">Total Items</button>

Javascript - 将新行添加到对列求和的 HTML table

Javascript - Add new row to an HTML table that sums columns

html

dom

html-table

dom-manipulation