当我将值放入表格中时，如何立即更新总数-解网

问：

function calculateTotal() {
  let rows = document.querySelectorAll("tbody tr");
  let grandTotal = 0;
  let negative = false;

  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];

    let quantityInput = row.querySelector(".quantity input");
    let priceInput = row.querySelector(".price input");
    let totalInput = row.querySelector(".total input");

    let quantity = parseInt(quantityInput.value);
    let price = parseFloat(priceInput.value).toFixed(2);

    if(quantity < 0 || price < 0){
      negative = true;
      quantity = 0;
      price = 0.00;
      quantityInput.value = "0";
      priceInput.value = "0.00";
    }

    let total = quantity * price;

    totalInput.value = total.toFixed(2);

    grandTotal += total;
  }

  document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

  if(negative){
    alert("No Negative Values!")
  }
}

table,td {
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

h1 {
    font-family: 'Ubuntu', cursive;
}

th {
    background-color: skyblue;
    font-weight: bold;
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

tbody {
    background-color: white;
}

.No {
    text-align: right;
}

td:nth-child(7) input[type="number"]{
    text-align: right; background-color: silver;
}

td:nth-child(6) input[type="number"]{
    text-align: right;
}

td:nth-child(5) input[type="number"]{
    text-align: right;
}

tfoot tr td:last-child input[type="number"]{
    text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

tfoot {
    font-weight: bold;
}

.Button {
    float:right;
}

.GrandTotal {
    background-color: silver;
    font-size: 18pt;
    float:right;
}

tr:hover {
    background-color: yellow;
}

.background-colour {
    background-color: skyblue;
}

body {
    background-color: lemonchiffon;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Ordering System</title>
    <link rel="stylesheet" href="CSS/book-order.css">
    <script src="book-order.js"></script>
</head>
<body>
    <h1>Book Ordering System</h1>
    
    <table id="myTable">
        <thead>
            <tr>
                <th>No.</th>
                <th>Book Title</th>
                <th>Author</th>
                <th>Category</th>
                <th>Unit Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="No">1</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">2</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

              <!--Unit Price-->
              <td class="price"><input type="number" value="0.00"></td>
              <!--Quantity-->
              <td class="quantity"><input type="number" value="0"></td>
              <!--Total-->
              <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">3</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

               <!--Unit Price-->
               <td class="price"><input type="number" value="0.00"></td>
               <!--Quantity-->
               <td class="quantity"><input type="number" value="0"></td>
               <!--Total-->
               <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">4</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">5</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td class="background-colour" colspan="5">
                    <button type="button" onclick="calculateTotal()" class="Button">Calculate Grand Total Price</button>
                </td>
                <td class="background-colour" colspan="2">
                    <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
                </td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

我正在尝试在不单击按钮的情况下立即输入单价和数量值后立即更新表中的总值。“计算总价”按钮的目的是将所有总价相加，并仅在“总价”输入字段中显示。

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book Ordering System</title>
    <link rel="stylesheet" href="CSS/book-order.css">
    <script src="book-order.js"></script>
</head>
<body>
    <h1>Book Ordering System</h1>
    
    <table id="myTable">
        <thead>
            <tr>
                <th>No.</th>
                <th>Book Title</th>
                <th>Author</th>
                <th>Category</th>
                <th>Unit Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="No">1</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">2</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

              <!--Unit Price-->
              <td class="price"><input type="number" value="0.00"></td>
              <!--Quantity-->
              <td class="quantity"><input type="number" value="0"></td>
              <!--Total-->
              <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">3</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

               <!--Unit Price-->
               <td class="price"><input type="number" value="0.00"></td>
               <!--Quantity-->
               <td class="quantity"><input type="number" value="0"></td>
               <!--Total-->
               <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">4</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">5</td>
                <!--Book Title-->
                <td><input type="text" value=""></td>
                <!--Author-->
                <td><input type="text" value=""></td>
                <!--Category-->
                <td>
                    <select>
                        <option value="Please choose the category..." disabled selected>Please choose the category...</option>
                        <option value="Business">Business</option>
                        <option value="Fiction">Fiction</option>
                        <option value="Mathematics">Mathematics</option>
                        <option value="Technology">Technology</option>
                    </select>
                </td>

                <!--Unit Price-->
                <td class="price"><input type="number" value="0.00"></td>
                <!--Quantity-->
                <td class="quantity"><input type="number" value="0"></td>
                <!--Total-->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td class="background-colour" colspan="5">
                    <button type="button" onclick="calculateTotal()" class="Button">Calculate Grand Total Price</button>
                </td>
                <td class="background-colour" colspan="2">
                    <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
                </td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

这是我的CSS代码：

table,td {
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

h1 {
    font-family: 'Ubuntu', cursive;
}

th {
    background-color: skyblue;
    font-weight: bold;
    padding: 0.5rem;
    border: 3px solid;
    border-collapse:collapse;
}

tbody {
    background-color: white;
}

.No {
    text-align: right;
}

td:nth-child(7) input[type="number"]{
    text-align: right; background-color: silver;
}

td:nth-child(6) input[type="number"]{
    text-align: right;
}

td:nth-child(5) input[type="number"]{
    text-align: right;
}

tfoot tr td:last-child input[type="number"]{
    text-align: right;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

tfoot {
    font-weight: bold;
}

.Button {
    float:right;
}

.GrandTotal {
    background-color: silver;
    font-size: 18pt;
    float:right;
}

tr:hover {
    background-color: yellow;
}

.background-colour {
    background-color: skyblue;
}

body {
    background-color: lemonchiffon;
}

这是我的Javascript ：

function calculateTotal() {
  let rows = document.querySelectorAll("tbody tr");
  let grandTotal = 0;
  let negative = false;

  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];

    let quantityInput = row.querySelector(".quantity input");
    let priceInput = row.querySelector(".price input");
    let totalInput = row.querySelector(".total input");

    let quantity = parseInt(quantityInput.value);
    let price = parseFloat(priceInput.value).toFixed(2);

    if(quantity < 0 || price < 0){
      negative = true;
      quantity = 0;
      price = 0.00;
      quantityInput.value = "0";
      priceInput.value = "0.00";
    }

    let total = quantity * price;

    totalInput.value = total.toFixed(2);

    grandTotal += total;
  }

  document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

  if(negative){
    alert("No Negative Values!")
  }
}

JavaScript HTML 函数输入

0赞 Yeshwin Verma 6/13/2023

您可以在输入字段上使用更改事件侦听器。

0赞 CBroe 6/13/2023

developer.mozilla.org/en-US/docs/Web/API/HTMLElement/......

答：

1赞 mplungjan 6/13/2023 #1

委托

window.addEventListener("DOMContentLoaded", () => { // when the page hass loaded
  document.getElementById("myTable").addEventListener("input", () => { // any input - you can test if it is a number field if you wish
    let rows = document.querySelectorAll("tbody tr");
    let negative = false;
    let grandTotal = [...rows].map(row => {
      let quantityInput = row.querySelector(".quantity input");
      let priceInput = row.querySelector(".price input");
      let totalInput = row.querySelector(".total input");
      let quantity = parseInt(quantityInput.value);
      let price = parseFloat(priceInput.value).toFixed(2);

      if (quantity < 0 || price < 0) {
        negative = true;
        quantity = 0;
        price = 0.00;
        quantityInput.value = "0";
        priceInput.value = "0.00";
      }
      let total = quantity * price;
      totalInput.value = total.toFixed(2);
      return total;
    }).reduce((a, b) => a + b)

    document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);

    if (negative) {
      alert("No Negative Values!")
    }
  });
});

<h1>Book Ordering System</h1>

<table id="myTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>Book Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="No">1</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">2</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">3</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">4</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">5</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td class="background-colour" colspan="5">
      </td>
      <td class="background-colour" colspan="2">
        <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
      </td>
    </tr>
  </tfoot>
</table>

0赞 Wimanicesir 6/13/2023 #2

您可以在所有输入元素的输入上添加事件侦听器：

// Get all inputs
let inputs = document.querySelectorAll("input");
let grandTotal = 0;

inputs.forEach((input) => input.addEventListener('input', () => calculateTotal()))

function calculateTotal() {
  let rows = document.querySelectorAll("tbody tr");
  grandTotal = 0
  let negative = false;

  for (let i = 0; i < rows.length; i++) {
    let row = rows[i];

    let quantityInput = row.querySelector(".quantity input");
    let priceInput = row.querySelector(".price input");
    let totalInput = row.querySelector(".total input");

    let quantity = parseInt(quantityInput.value);
    let price = parseFloat(priceInput.value).toFixed(2);

    if (quantity < 0 || price < 0) {
      negative = true;
      quantity = 0;
      price = 0.00;
      quantityInput.value = "0";
      priceInput.value = "0.00";
    }

    let total = quantity * price;

    totalInput.value = total.toFixed(2);

    grandTotal += total;
  }

  if (negative) {
    alert("No Negative Values!")
  }
}

function updateGrandTotal () {
    document.querySelector(".GrandTotal").value = grandTotal.toFixed(2);
}

<h1>Book Ordering System</h1>

<table id="myTable">
  <thead>
    <tr>
      <th>No.</th>
      <th>Book Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="No">1</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">2</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">3</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">4</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">5</td>
      <!--Book Title-->
      <td><input type="text" value=""></td>
      <!--Author-->
      <td><input type="text" value=""></td>
      <!--Category-->
      <td>
        <select>
          <option value="Please choose the category..." disabled selected>Please choose the category...</option>
          <option value="Business">Business</option>
          <option value="Fiction">Fiction</option>
          <option value="Mathematics">Mathematics</option>
          <option value="Technology">Technology</option>
        </select>
      </td>

      <!--Unit Price-->
      <td class="price"><input type="number" value="0.00"></td>
      <!--Quantity-->
      <td class="quantity"><input type="number" value="0"></td>
      <!--Total-->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td class="background-colour" colspan="5">
        <button type="button" onclick="updateGrandTotal()" class="Button">Calculate Grand Total Price</button>
      </td>
      <td class="background-colour" colspan="2">
        <input type="number" name="Grand Total Price" value="0.00" class="GrandTotal" disabled>
      </td>
    </tr>
  </tfoot>
</table>

0赞 LLX 6/13/2023

嗨，我明白你在这里做了什么。但是，我尝试仅在用户输入“数量”和“单价”值时显示每行的总计，但未直接显示在总价中。总价只应在用户单击按钮时显示，并且仅在单击按钮时，按钮的功能才会将每行的所有总价相加，但当用户为每行输入值时，仍应显示每行的总计

0赞 Wimanicesir 6/13/2023

如果我理解正确的话，你可以拆分这个功能。检查编辑:)

0赞 LLX 6/14/2023

有没有办法只用一个函数来工作？

0赞 Wimanicesir 6/14/2023

您可以检查传递了哪个元素。如果它是一个按钮，你可以执行那一行。但是，我不建议这样做。为什么你只想要一个功能？

上一个：如何为每个 onclick（）输入提交创建一个函数？

下一个：SOFT_INPUT_ADJUST_RESIZE已弃用，修复程序未按预期进行

当我将值放入表格中时，如何立即更新总数

How to update the total number immediately when i put the value in the table

评论

评论