Question

试图汇总表最后一列中的动态输入值。如果我对数字值进行硬编码，那么计算就可以了。如果我使用I输入自己的数值，则会得到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>

Answer 1

问题是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);
  }

计算javascript

1 个答案: