У меня есть таблица, в которой пользователь может динамически добавлять строку по мере необходимости. И, как вы можете видеть под таблицей, это сумма значений последнего столбца, которые динамически добавляются. Мне нужно добавить два текстовых поля над суммой из этого одного текстового поля (имя как скидка) принимать ввод (как число) от пользователя, а второе текстовое поле (имя как финальная сумма) отображать вывод как значение (финальная сумма = сумма-скидка) . и если пользователь не указывает вводимого значения, тогда скидка должна быть изначально равна нулю. и итоговая сумма должна быть равна сумме

Если вам нужна дополнительная информация, дайте мне знать, спасибо! Любая помощь будет оценена :)

<html>
  <head>
    <title>Add/Remove dynamic rows in HTML table</title>

    <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;

        // calculate the totale of every total
        var sumContainer = document.getElementById("totalOfTotals");
        var totalContainers = document.querySelectorAll("[name=total]"),
          i;
        var sumValue = 0;
        for (i = 0; i < totalContainers.length; ++i) {
          sumValue += parseInt(totalContainers[i].value);
        }
        sumContainer.textContent = sumValue;
      }
    </script>
  </head>
  <body>
    <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>
              </select>
            </td>
            <td>
              <label for="total">Total</label>
              <input
                type="text"
                required="required"
                class="small"
                name="total"
              />
            </td>
          </p>
        </tr>
      </tbody>
    </table>
    <div>
      <tr>
        <span>Sum</span>
        <span id="totalOfTotals">0</span>
      </tr>
    </div>
  </body>
</html>
-3
Mjwebdevloper 15 Окт 2020 в 08:44

1 ответ

Лучший ответ

Решение здесь !!!

<html>
  <head>
    <title>Add/Remove dynamic rows in HTML table</title>

    <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 myBox4 = mainRow.querySelectorAll("[name=discount]")[0].value;
        var total = mainRow.querySelectorAll("[name=total]")[0];
        var myResult1 = myBox1 * myBox3;
        total.value = myResult1-myBox4;

        // calculate the totale of every total
        var sumContainer = document.getElementById("totalOfTotals");
        var totalContainers = document.querySelectorAll("[name=total]"),
          i;
        var sumValue = 0;
        for (i = 0; i < totalContainers.length; ++i) {
          sumValue += parseInt(totalContainers[i].value);
        }
        sumContainer.textContent = sumValue;
      }
    </script>
  </head>
  <body>
    <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>
              </select>
            </td>
            <td>
              <label for="discount">Discount</label>
              <input
                type="text"
                required="required"
                class="small"
                name="discount"
                oninput="calculate('row_0')"
              />
            </td>
            <td>
              <label for="total">Total</label>
              <input
                type="text"
                required="required"
                class="small"
                name="total"
              />
            </td>
          </p>
        </tr>
      </tbody>
    </table>
    <div>
      <tr>
        <span>Sum</span>
        <span id="totalOfTotals">0</span>
      </tr>
    </div>
  </body>
</html>
0
Uday 15 Окт 2020 в 09:37