表格追加总计行失败求助：点击按钮无法生成总价行

代码中的核心错误： #

• tbody元素获取失败：你用document.getElementsByName("tbody")获取表格主体，但你的<tbody>标签没有设置name属性，导致无法拿到正确元素，应该改用document.querySelector("tbody")或者document.getElementsByTagName("tbody")[0]。
• 字符串拼接语法错误：Grand - Total未加引号，会被JS当作变量解析引发报错，需写成字符串"Grand Total"。
• 表格列数不匹配：原表格有3列，你追加的行只写了2个<td>，会导致布局错乱，需通过colspan合并单元格或补全对应列。
• 重复点击重复添加：每次点击按钮都会新增总价行，需先检查是否已有总价行，存在则更新数值而非重复创建。

修正后的完整代码 #

HTML部分（结构无需修改）

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Grocery List</h1>
  <table>
    <thead>
      <tr>
        <th>Sr. No.</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Item-1</td>
        <td data-ns-test="price" class="price">100</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Item-2</td>
        <td data-ns-test="price" class="price">200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Item-3</td>
        <td data-ns-test="price" class="price">2</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Item-4</td>
        <td data-ns-test="price" class="price">1</td>
      </tr>
    </tbody>
  </table>
  <button onClick='calcTotal()'>Total</button>
  <script src="app.js"></script>
</body>

</html>

JS部分

function calcTotal() {
  let sum = 0;
  const prices = document.querySelectorAll(".price");
  
  // 计算总价
  prices.forEach(priceEl => {
    sum += parseInt(priceEl.innerHTML);
  });
  
  const tbody = document.querySelector("tbody");
  // 检查是否已有总价行，有则更新数值
  const existingTotalCell = document.querySelector("[data-ns-test='grandTotal']");
  if (existingTotalCell) {
    existingTotalCell.textContent = sum;
    return;
  }
  
  // 无总价行则新增
  const row = document.createElement("tr");
  // 合并前3列，保证表格布局整齐
  row.innerHTML = '<td colspan="3" style="text-align:right;">Grand Total: </td><td data-ns-test="grandTotal">' + sum + '</td>';
  tbody.appendChild(row);
}

内容的提问来源于stack exchange，提问作者Md Amir Sohail