时间戳

首页 > 解决方案 > 在javascript中计算表格最后一列中输入值的总和

javascript - 在javascript中计算表格最后一列中输入值的总和

问题描述

总结我表格最后一列中的动态输入值。如果我对数值进行硬编码，那么计算就可以了。如果我使用 a 输入我自己的值，我会得到 NaN

我用过

我的 html 表在加载时添加，并根据需要通过按钮添加行。

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>

    <body>
      <table id='table' border="1">
        <tr>
          <th>RO#</th>
          <th>Work</th>
          <th>Time</th>
        </tr>
        <tr>
          <td>615235</td>
          <td>lof, rotate</td>
          <!-- <td>23</td> -->
          <td><input type="number" /></td>
        </tr>
        <tr>
          <td>6154879</td>
          <td>engine, trans</td>
          <!-- <td>23</td> -->
          <td><input typ="number" /></td>
        </tr>
        <tr>
          <td>6158978</td>
          <td>rotate, serp belt, timing belt</td>
          <!-- <td>23</td> -->
          <td><input type="number" /></td>
        </tr>
      </table>

      <br>

      <button onclick='calculate()'>Calculate</button>

      <script>
        function calculate() {
          let tbl = document.getElementById('table'),
              sumVal = 0;

          for (let i = 1; i < tbl.rows.length; i++) {
            sumVal = sumVal + parseInt(tbl.rows[i].cells[2].input);
          }

          console.log(sumVal);
        }
      </script>


    </body>
  </html>

我NaN在使用<td><input type="number or type="text"><td>代码时得到

标签： javascripthtml

解决方案

问题是该input属性不存在于tbl.rows[i].cells[2]. 老实说，我不知道是否可以从您尝试使用的表格单元格集合中获取输入值。

我建议使用这种方法，querySelectorAll在其中我们指定要从中获取数据的输入：

function calculate() {
    let tbl = document.querySelectorAll("table input[type='number']"),
        sumVal = 0;

    for (let i = 0; i < tbl.length; i++) {
      sumVal += Number(tbl[i].value);
    }
    console.log(sumVal);
  }

推荐阅读