如何使用 javascript 从总金额中找到折扣

Question

我有一个 table，用户可以根据需要动态添加一行。正如您在 table 下方看到的那样，它是动态添加的最后一列值的总和。我需要在总和上方添加两个文本框，一个文本框（名称为折扣）从用户那里获取输入（作为数字），第二个文本框（名称为最终总和）将输出显示为值（最终总和=总和折扣） .如果用户没有给出任何输入值，那么折扣最初应该为零。最后的和应该等于 sum

如果您想了解更多信息，请告诉我，谢谢！任何帮助将不胜感激:)

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

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

如何使用 javascript 从总金额中找到折扣

how to find discount from total sum using javascript

html

javascript

discount