如何通过数组形式的id求和td标签内的数字？

方法1：使用CSS前缀选择器快速匹配元素 #

利用CSS属性前缀选择器[id^="total["]直接选中所有id以total[开头的<td>元素，遍历并累加数值：

let totalSum = 0;
// 匹配所有id以"total["开头的td
document.querySelectorAll('td[id^="total["]').forEach(td => {
  const value = parseFloat(td.textContent.trim());
  // 仅累加有效数字
  if (!isNaN(value)) {
    totalSum += value;
  }
});
console.log(totalSum); // 输出计算得到的总和

方法2：用正则严格匹配id格式 #

如果需要确保id严格符合total[数字]的格式（避免误匹配类似total[abc]的元素），可以用正则表达式校验id：

let totalSum = 0;
// 遍历所有td元素
document.querySelectorAll('td').forEach(td => {
  // 正则匹配id是否为total[数字]格式
  if (/^total\[\d+\]$/.test(td.id)) {
    const value = parseFloat(td.textContent.trim());
    if (!isNaN(value)) {
      totalSum += value;
    }
  }
});
console.log(totalSum);

注意事项 #

• 如果td内存在非数字内容，parseFloat会提取开头的有效数字（比如"200元"会被转为200）；若需要仅处理纯数字文本，可以改用Number(td.textContent)，非纯数字会返回NaN，同样通过!isNaN判断后累加。
• 调用trim()是为了去除文本前后的空格，避免转数字时出错。

内容的提问来源于stack exchange，提问作者lewin