对 HTML 表的列数求和 [duplicate]

Summing the numbers of the columns of the HTML table [duplicate]

提问人：arash 提问时间：9/29/2023 最后编辑：isherwoodarash 更新时间：9/29/2023 访问量：53

问：

这个问题在这里已经有答案了：
分别对多个表的 tbody 表求和 （2 个答案）
使用 jquery 对 html 中另一个单元格的单元格求和，并在另一个单元格中显示结果 （2 个答案）
上个月关闭。

我想将以下表格的列相加，并在最后一行显示相同的表格。我能够收集第一个表的列并在最后一行显示它们，但我想对所有表重复此代码，但我不知道该怎么做。

enter image description here

我使用以下代码添加了第一个表的列，它工作正常，但我不知道如何为所有表重复此代码。

function computeTableColumnTotal(colNumber) {
  var result = 0;
  try {
    var tableBody = document.querySelector("tbody");
    var howManyRows = tableBody.rows.length;
    for (var i = 1; i < (howManyRows - 1); i++) {
      var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data);
      if (!isNaN(thisNumber)) {
        result += thisNumber;
      }
    }
  } finally {
    return result;
  }
}

var final = 0;
var tbody = document.querySelector("tbody");
var howManyCols = tbody.rows[0].cells.length;
var totalRow = tbody.rows[tbody.rows.length - 1];

for (var j = 1; j < howManyCols; j++) {
  final = computeTableColumnTotal(j);
  totalRow.cells[j].innerText = final;
}
html {
     scroll-behavior:smooth;
}
 body {
     margin-bottom:200px;
}
 * {
     scroll-margin:30px;
}
 h1 {
     display:inline-block;
     margin-top:0px;
     font-size:22px;
     border-bottom:3px solid black;
}
 span{
     margin-bottom:20px;
}
 table {
     border-collapse: collapse;
     width: 90%;
     direction:ltr;
     margin:10px 10px;
     overflow: scroll;
     margin:0px;
}
 th {
     border:2px solid black;
     padding:6px;
     font-size:17px;
     font-weight:bold;
     text-align:center;
     border-collapse: collapse;
}
 td {
     border:2px solid black;
     padding:6px;
     font-size:16px;
     font-weight:bold;
     text-align:center;
     border-collapse: collapse;
}
 caption {
     padding:6px;
     border:2px solid black;
     border-bottom:none;
     font-size:17px;
     font-weight:bold;
     text-align:right;
     border-collapse: collapse;
     background:dodgerblue;
     color:white;
}
 tr:nth-of-type(odd){
     background:#B9B9B9;
}
 button {
     margin:20px 0px;
}
 table{
     margin-top: 20px;
}
<!DOCTYPE html>
<html dir="ltr">
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
        <tr>
          <td>A</td>
          <td>10</td>
          <td>10</td>
        </tr>
        <tr>
         <td>B</td>
         <td>1</td>
         <td>1</td>
        </tr>
        <tr>
          <td>C</td>
          <td>20</td>
          <td>20</td>
        </tr>
        <tr>
          <td>D</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Total</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
        <tr>
          <td>A</td>
           <td>10</td>
           <td>10</td>
        </tr>
        <tr>
           <td>B</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
           <td>C</td>
           <td>20</td>
           <td>20</td>
        </tr>
        <tr>
           <td>D</td>
           <td>1</td>
           <td>1</td>
        </tr>
       <tr>
           <td>Total</td>
           <td></td>
           <td></td>
        </tr>
        </tbody>
    </table>
    <table>
      <tbody>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
      </tr>
        <tr>
          <td>A</td>
           <td>10</td>
           <td>10</td>
        </tr>
        <tr>
           <td>B</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
           <td>C</td>
           <td>20</td>
           <td>20</td>
        </tr>
        <tr>
           <td>D</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
          <td>Total</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

JavaScript HTML 循环 for-loop html-table

评论

1赞 remix23 9/29/2023
欢迎来到 stackoverflow。我已经格式化了您的问题以使其更具可读性。请尽量将您的问题格式化，以帮助我们下次:)为您提供帮助（避免截图）请参阅下面关于querySelector和querySelectorAll之间区别的回答。有好的一天

答：

0赞 remix23 9/29/2023 #1

document.querySelector返回与查询匹配的第一个元素。

只需用于获取所有表体即可。document.querySelectorAll

然后循环返回的 tbody，例如使用循环。for(tbody in tbodys)

将电流传递给计算函数，而不是再次进行查询。 瞧：tbody

function computeTableColumnTotal(tableBody, colNumber) {
  var result = 0;
  try {
    var howManyRows = tableBody.rows.length;
    for (var i = 1; i < (howManyRows - 1); i++) {
      var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data);
      if (!isNaN(thisNumber)) {
        result += thisNumber;
      }
    }
  } finally {
    return result;
  }
}

var final = 0;
var tbodys = document.querySelectorAll("tbody");
for (tbody of tbodys) {
  var howManyCols = tbody.rows[0].cells.length;
  var totalRow = tbody.rows[tbody.rows.length - 1];

  for (var j = 1; j < howManyCols; j++) {
    final = computeTableColumnTotal(tbody, j);
    totalRow.cells[j].innerText = final;
  }
}
 html {
     scroll-behavior:smooth;
}
 body {
     margin-bottom:200px;
}
 * {
     scroll-margin:30px;
}
 h1 {
     display:inline-block;
     margin-top:0px;
     font-size:22px;
     border-bottom:3px solid black;
}
 span{
     margin-bottom:20px;
}
 table {
     border-collapse: collapse;
     width: 90%;
     direction:ltr;
     margin:10px 10px;
     overflow: scroll;
     margin:0px;
}
 th {
     border:2px solid black;
     padding:6px;
     font-size:17px;
     font-weight:bold;
     text-align:center;
     border-collapse: collapse;
}
 td {
     border:2px solid black;
     padding:6px;
     font-size:16px;
     font-weight:bold;
     text-align:center;
     border-collapse: collapse;
}
 caption {
     padding:6px;
     border:2px solid black;
     border-bottom:none;
     font-size:17px;
     font-weight:bold;
     text-align:right;
     border-collapse: collapse;
     background:dodgerblue;
     color:white;
}
 tr:nth-of-type(odd){
     background:#B9B9B9;
}
 button {
     margin:20px 0px;
}
 table{
     margin-top: 20px;
}
<!DOCTYPE html>
<html dir="ltr">
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title></title>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
        <tr>
          <td>A</td>
          <td>10</td>
          <td>10</td>
        </tr>
        <tr>
         <td>B</td>
         <td>1</td>
         <td>1</td>
        </tr>
        <tr>
          <td>C</td>
          <td>20</td>
          <td>20</td>
        </tr>
        <tr>
          <td>D</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>Total</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <tr>
          <th>column 1</th>
          <th>column 2</th>
          <th>column 3</th>
        </tr>
        <tr>
          <td>A</td>
           <td>10</td>
           <td>10</td>
        </tr>
        <tr>
           <td>B</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
           <td>C</td>
           <td>20</td>
           <td>20</td>
        </tr>
        <tr>
           <td>D</td>
           <td>1</td>
           <td>1</td>
        </tr>
       <tr>
           <td>Total</td>
           <td></td>
           <td></td>
        </tr>
        </tbody>
    </table>
    <table>
      <tbody>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
      </tr>
        <tr>
          <td>A</td>
           <td>10</td>
           <td>10</td>
        </tr>
        <tr>
           <td>B</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
           <td>C</td>
           <td>20</td>
           <td>20</td>
        </tr>
        <tr>
           <td>D</td>
           <td>1</td>
           <td>1</td>
        </tr>
        <tr>
          <td>Total</td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

上一个：Javascript 循环对每个元素重复查询

下一个：为什么这个“解密”函数在这个 JavaScript 文件中不起作用？