javascript - 如何自动汇总表中动态输入字段中的所有行

问题描述

如何自动汇总表中动态输入字段中的所有行？

我正在尝试使用 JavaScript 动态总结所有行，但我的问题是该calcsum()函数无法正常工作，并且它不会在添加总文本框中打印任何内容。
我的calcsum()功能需要什么更新？
我知道我的错误在calcsum()函数中，但我不知道如何解决它。

<HTML>

<HEAD>
  <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <SCRIPT language="javascript">
    function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if (rowCount < 4) { // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;
        row.id = 'row_' + rowCount;
        for (var i = 0; i < colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.outerHTML = table.rows[0].cells[i].outerHTML;
        }
        var listitems = row.querySelectorAll("input, select");

        for (i = 0; i < listitems.length; i++) {
          listitems[i].setAttribute("oninput", "calculate('" + row.id + "')");
        }

      } else {
        alert("Maximum Passenger per ticket is 4.");

      }
    }



    function calculate(elementID) {
      var mainRow = document.getElementById(elementID);
      var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;
      var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value;
      var total = mainRow.querySelectorAll('[name=total]')[0];
      var myResult1 = myBox1 * myBox3;
      total.value = myResult1;

    }

    function calcsum(numberOfDivs) {
      var sum = 0;
      for (var i = 0; i < numberOfDivs; i++) {
        sum += parseInt(document.getElementsById('elementID' + i)[0].value);
      }
      return sum;


    }
  </SCRIPT>
</HEAD>

<BODY>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <input type="button" value="Add" onClick="addRow('dataTable')" />

  <table id="dataTable" class="form" border="1">
    <tbody>
      <tr id='row_0'>
        <p>
          <td>
            <label>Quantity</label>
            <input type="number" required="required" name="qty" oninput="calculate('row_0')">
          </td>

          <td>
            <label for="sel">Price</label>
            <select name="sel" id="sel" oninput="calculate('row_0')" required>
              <option value="" disabled selected>Choose your option</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
          </td>
          <td>
            <label for="total">Total</label>
            <input type="text" required="required" class="small" name="total">
          </td>
        </p>
      </tr>
    </tbody>
  </table>
  add total<input type="text" oninput="calcsum()" name="anstotal">
</BODY>

</HTML>

标签： javascripthtml

javascript - 如何自动汇总表中动态输入字段中的所有行

问题描述

解决方案

推荐阅读