时间戳

首页 > 解决方案 > 如果选中复选框，则汇总 HTML 表格中的单元格值

javascript - 如果选中复选框，则汇总 HTML 表格中的单元格值

问题描述

我有一个包含三列的表：项目、价格和复选框。我想计算小计，但只包括带有选中复选框的价格。到目前为止，我拥有的代码是各种独立工作的混合体；但是现在我收到错误消息“TypeError：无法读取未定义的属性（读取'innerHTML'）”。我究竟做错了什么？

function calculate() {
  const ele = document.getElementsByTagName('input');
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (var i = 0; i < ele.length; i++) {
    let td = tr[i].getElementsByTagName("td")[1];
    let price = td[i].innerHTML;
    if (ele[i].type == 'checkbox' && ele[i].checked == true)
      subTotal += price;
  }
  document.getElementById("val").innerHTML = "The subtotal is " + subTotal;
}
<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is 0</span>
  <button onclick="calculate()">Calculate subtotal</button>

</html>

标签： javascripthtml

解决方案

您必须更改该行td[i]，因为它没有按照错误提示进行定义。所以，考虑使用 bare td并访问它的innerText. 它将返回一个带有值的字符串，您必须将其转换为浮点数parseFloat。最后，您必须设置所需的精度，subTotal以便打印所需的小数位数。

function calculate() {
  const ele = document.getElementsByTagName('input');
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (var i = 0; i < ele.length; i++) {
    let td = tr[i].getElementsByTagName("td")[1];
    let price = parseFloat(td.innerText); // change here
    if (ele[i].type == 'checkbox' && ele[i].checked == true)
      subTotal += price;
  }
  document.getElementById("val").innerHTML = "The subtotal is " + subTotal.toFixed(2); // and set precision here
}
<!DOCTYPE html>
<html>

<body>

  <table id="myTable">
    <tr>
      <td>T-Shirt</td>
      <td>9.99</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>Pants</td>
      <td>49.99</td>
      <td><input type="checkbox"></td>
    </tr>
  </table>
  <span id="val">The subtotal is: </span>
  <button onclick="calculate()">Calculate subtotal</button>

</html>

推荐阅读