Question

使用JavaScript，我如何向HTML表中添加一个新行，该行对第二行之后的值进行求和。

以下是上述内容的示例：

预期结果：

这是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

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

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

然后，我为表中的所有五列创建了新的td元素，并为除分区之外的所有列创建了文本节点。

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

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

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

现在我们需要添加所有这些项目，我们可以使用reduce方法完成此操作。

现在将文本节点添加到单元格，将单元格添加到行，最后将行添加到表格中。最后，将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>

Answer 2

使用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

Javascript - 将新行添加到对表

2 个答案: