2023年6月13日 15:11:05go评论70阅读模式

英文:

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

问题

I have translated the code for you as requested. Here is the translated code:

<!-- 开始代码片段: js 隐藏: false 控制台: false Babel: false -->

<!-- 语言: lang-js -->
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("不允许负值！");
  }
}

<!-- 语言: lang-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;
}

<!-- 语言: lang-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>图书订购系统</title>
    <link rel="stylesheet" href="CSS/book-order.css">
    <script src="book-order.js"></script>
</head>
<body>
    <h1>图书订购系统</h1>
    
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>类别</th>
                <th>单价</th>
                <th>数量</th>
                <th>总计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="No">1</td>
                <!-- 书名 -->
                <td><input type="text" value=""></td>
                <!-- 作者 -->
                <td><input type="text" value=""></td>
                <!-- 类别 -->
                <td>
                    <select>
                        <option value="请选择类别..." disabled selected>请选择类别...</option>
                        <option value="商业">商业</option>
                        <option value="小说">小说</option>
                        <option value="数学">数学</option>
                        <option value="技术">技术</option>
                    </select>
                </td>

                <!-- 单价 -->
                <td class="price"><input type="number" value="0.00"></td>
                <!-- 数量 -->
                <td class="quantity"><input type="number" value="0"></td>
                <!-- 总计 -->
                <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">2</td>
                <!-- 书名 -->
                <td><input type="text" value=""></td>
                <!-- 作者 -->
                <td><input type="text" value=""></td>
                <!-- 类别 -->
                <td>
                    <select>
                        <option value="请选择类别..." disabled selected>请选择类别...</option>
                        <option value="商业">商业</option>
                        <option value="小说">小说</option>
                        <option value="数学">数学</option>
                        <option value="技术">技术</option>
                    </select>
                </td>

              <!-- 单价 -->
              <td class="price"><input type="number" value="0.00"></td>
              <!-- 数量 -->
              <td class="quantity"><input type="number" value="0"></td>
              <!-- 总计 -->
              <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">3</td>
                <!-- 书名 -->
                <td><input type="text" value=""></td>
                <!-- 作者 -->
                <td><input type="text" value=""></td>
                <!-- 类别 -->
                <td>
                    <select>
                        <option value="请选择类别..." disabled selected>请选择类别...</option>
                        <option value="商业">商业</option>
                        <option value="小说">小说</option>
                        <option value="数学">数学</option>
                        <option value="技术">技术</option>
                    </select>
                </td>

               <!-- 单价 -->
               <td class="price"><input type="number" value="0.00"></td>
               <!-- 数量 -->
               <td class="quantity"><input type="number" value="0"></td>
               <!-- 总计 -->
               <td class="total"><input type="number" value="0.00" disabled></td>
            </tr>

            <tr>
                <td class="No">4</td>
                <!-- 书名 -->
                <td><input type="text" value=""></td>
                <!-- 作者 -->
                <td><input type="text" value=""></td>
                <!-- 类别 -->
                <td>
                    <select>
                        <option value="请选择类别..." disabled

<details>
<summary>英文:</summary>



&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-js --&gt;

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

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

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

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

        if(quantity &lt; 0 || price &lt; 0){
          negative = true;
          quantity = 0;
          price = 0.00;
          quantityInput.value = &quot;0&quot;;
          priceInput.value = &quot;0.00&quot;;
        }

        let total = quantity * price;

        totalInput.value = total.toFixed(2);

        grandTotal += total;
      }

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

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

&lt;!-- language: lang-css --&gt;

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

    h1 {
        font-family: &#39;Ubuntu&#39;, 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=&quot;number&quot;]{
        text-align: right; background-color: silver;
    }

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

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

    tfoot tr td:last-child input[type=&quot;number&quot;]{
        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;
    }

&lt;!-- language: lang-html --&gt;

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

                    &lt;!--Unit Price--&gt;
                    &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
                    &lt;!--Quantity--&gt;
                    &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
                    &lt;!--Total--&gt;
                    &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td class=&quot;No&quot;&gt;2&lt;/td&gt;
                    &lt;!--Book Title--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Author--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Category--&gt;
                    &lt;td&gt;
                        &lt;select&gt;
                            &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
                            &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
                            &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
                            &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
                            &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/td&gt;

                  &lt;!--Unit Price--&gt;
                  &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
                  &lt;!--Quantity--&gt;
                  &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
                  &lt;!--Total--&gt;
                  &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td class=&quot;No&quot;&gt;3&lt;/td&gt;
                    &lt;!--Book Title--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Author--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Category--&gt;
                    &lt;td&gt;
                        &lt;select&gt;
                            &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
                            &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
                            &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
                            &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
                            &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/td&gt;

                   &lt;!--Unit Price--&gt;
                   &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
                   &lt;!--Quantity--&gt;
                   &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
                   &lt;!--Total--&gt;
                   &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td class=&quot;No&quot;&gt;4&lt;/td&gt;
                    &lt;!--Book Title--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Author--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Category--&gt;
                    &lt;td&gt;
                        &lt;select&gt;
                            &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
                            &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
                            &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
                            &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
                            &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/td&gt;

                    &lt;!--Unit Price--&gt;
                    &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
                    &lt;!--Quantity--&gt;
                    &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
                    &lt;!--Total--&gt;
                    &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
                &lt;/tr&gt;

                &lt;tr&gt;
                    &lt;td class=&quot;No&quot;&gt;5&lt;/td&gt;
                    &lt;!--Book Title--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Author--&gt;
                    &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
                    &lt;!--Category--&gt;
                    &lt;td&gt;
                        &lt;select&gt;
                            &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
                            &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
                            &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
                            &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
                            &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/td&gt;

                    &lt;!--Unit Price--&gt;
                    &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
                    &lt;!--Quantity--&gt;
                    &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
                    &lt;!--Total--&gt;
                    &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;

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

&lt;!-- end snippet --&gt;

I am trying to update the total value in the table immediately right after I input the value in unit price and quantity without clicking the button. The purpose of the &quot;Calculate Grand Total Price&quot; button is suppose to sum all of the total and display it in &quot;GrandTotal&quot; input field only.

This is my HTML code:

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

&lt;table id=&quot;myTable&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;No.&lt;/th&gt;
&lt;th&gt;Book Title&lt;/th&gt;
&lt;th&gt;Author&lt;/th&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Unit Price&lt;/th&gt;
&lt;th&gt;Quantity&lt;/th&gt;
&lt;th&gt;Total&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;1&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;2&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;3&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;4&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;5&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td class=&quot;background-colour&quot; colspan=&quot;5&quot;&gt;
&lt;button type=&quot;button&quot; onclick=&quot;calculateTotal()&quot; class=&quot;Button&quot;&gt;Calculate Grand Total Price&lt;/button&gt;
&lt;/td&gt;
&lt;td class=&quot;background-colour&quot; colspan=&quot;2&quot;&gt;
&lt;input type=&quot;number&quot; name=&quot;Grand Total Price&quot; value=&quot;0.00&quot; class=&quot;GrandTotal&quot; disabled&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;

</body>
</html>


This is my CSS code:

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


This is my 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(&quot;.quantity input&quot;);
let priceInput = row.querySelector(&quot;.price input&quot;);
let totalInput = row.querySelector(&quot;.total input&quot;);
let quantity = parseInt(quantityInput.value);
let price = parseFloat(priceInput.value).toFixed(2);
if(quantity &lt; 0 || price &lt; 0){
negative = true;
quantity = 0;
price = 0.00;
quantityInput.value = &quot;0&quot;;
priceInput.value = &quot;0.00&quot;;
}
let total = quantity * price;
totalInput.value = total.toFixed(2);
grandTotal += total;

}

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

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


</details>
# 答案1
**得分**: 1
以下是您要翻译的内容：
```html
<h1>图书订购系统</h1>
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>图书标题</th>
<th>作者</th>
<th>类别</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
</thead>
<tbody>
<tr>
<td class="No">1</td>
<!--图书标题-->
<td><input type="text" value=""></td>
<!--作者-->
<td><input type="text" value=""></td>
<!--类别-->
<td>
<select>
<option value="请选择类别..." disabled selected>请选择类别...</option>
<option value="商业">商业</option>
<option value="小说">小说</option>
<option value="数学">数学</option>
<option value="技术">技术</option>
</select>
</td>
<!--单价-->
<td class="price"><input type="number" value="0.00"></td>
<!--数量-->
<td class="quantity"><input type="number" value="0"></td>
<!--总计-->
<td class="total"><input type="number" value="0.00" disabled></td>
</tr>
<tr>
<td class="No">2</td>
<!--图书标题-->
<td><input type="text" value=""></td>
<!--作者-->
<td><input type="text" value=""></td>
<!--类别-->
<td>
<select>
<option value="请选择类别..." disabled selected>请选择类别...</option>
<option value="商业">商业</option>
<option value="小说">小说</option>
<option value="数学">数学</option>
<option value="技术">技术</option>
</select>
</td>
<!--单价-->
<td class="price"><input type="number" value="0.00"></td>
<!--数量-->
<td class="quantity"><input type="number" value="0"></td>
<!--总计-->
<td class="total"><input type="number" value="0.00" disabled></td>
</tr>
<tr>
<td class="No">3</td>
<!--图书标题-->
<td><input type="text" value=""></td>
<!--作者-->
<td><input type="text" value=""></td>
<!--类别-->
<td>
<select>
<option value="请选择类别..." disabled selected>请选择类别...</option>
<option value="商业">商业</option>
<option value="小说">小说</option>
<option value="数学">数学</option>
<option value="技术">技术</option>
</select>
</td>
<!--单价-->
<td class="price"><input type="number" value="0.00"></td>
<!--数量-->
<td class="quantity"><input type="number" value="0"></td>
<!--总计-->
<td class="total"><input type="number" value="0.00" disabled></td>
</tr>
<tr>
<td class="No">4</td>
<!--图书标题-->
<td><input type="text" value=""></td>
<!--作者-->
<td><input type="text" value=""></td>
<!--类别-->
<td>
<select>
<option value="请选择类别..." disabled selected>请选择类别...</option>
<option value="商业">商业</option>
<option value="小说">小说</option>
<option value="数学">数学</option>
<option value="技术">技术</option>
</select>
</td>
<!--单价-->
<td class="price"><input type="number" value="0.00"></td>
<!--数量-->
<td class="quantity"><input type="number" value="0"></td>
<!--总计-->
<td class="total"><input type="number" value="0.00" disabled></td>
</tr>
<tr>
<td class="No">5</td>
<!--图书标题-->
<td><input type="text" value=""></td>
<!--作者-->
<td><input type="text" value=""></td>
<!--类别-->
<td>
<select>
<option value="请选择类别..." disabled selected>请选择类别...</option>
<option value="商业">商业</option>
<option value="小说">小说</option>
<option value="数学">数学</option>
<option value="技术">技术</option>
</select>
</td>
<!--单价-->
<td class="price"><input type="number" value="0.00"></td>
<!--数量-->
<td class="quantity"><input type="number" value="0"></td>
<!--总计-->
<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="总计价格" value="0.00" class="GrandTotal" disabled>
</td>
</tr>
</tfoot>
</table>

请注意，我将"Grand Total Price"翻译为"总计价格"，以便更好地适应中文环境。如果需要其他翻译或有其他问题，请告诉我。

英文:

Delegate

window.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; { // when the page hass loaded
document.getElementById(&quot;myTable&quot;).addEventListener(&quot;input&quot;, () =&gt; { // any input - you can test if it is a number field if you wish
let rows = document.querySelectorAll(&quot;tbody tr&quot;);
let negative = false;
let grandTotal = [...rows].map(row =&gt; {
let quantityInput = row.querySelector(&quot;.quantity input&quot;);
let priceInput = row.querySelector(&quot;.price input&quot;);
let totalInput = row.querySelector(&quot;.total input&quot;);
let quantity = parseInt(quantityInput.value);
let price = parseFloat(priceInput.value).toFixed(2);
if (quantity &lt; 0 || price &lt; 0) {
negative = true;
quantity = 0;
price = 0.00;
quantityInput.value = &quot;0&quot;;
priceInput.value = &quot;0.00&quot;;
}
let total = quantity * price;
totalInput.value = total.toFixed(2);
return total;
}).reduce((a, b) =&gt; a + b)
document.querySelector(&quot;.GrandTotal&quot;).value = grandTotal.toFixed(2);
if (negative) {
alert(&quot;No Negative Values!&quot;)
}
});
});

&lt;h1&gt;Book Ordering System&lt;/h1&gt;
&lt;table id=&quot;myTable&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;No.&lt;/th&gt;
&lt;th&gt;Book Title&lt;/th&gt;
&lt;th&gt;Author&lt;/th&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Unit Price&lt;/th&gt;
&lt;th&gt;Quantity&lt;/th&gt;
&lt;th&gt;Total&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;1&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;2&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;3&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;4&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class=&quot;No&quot;&gt;5&lt;/td&gt;
&lt;!--Book Title--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Author--&gt;
&lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
&lt;!--Category--&gt;
&lt;td&gt;
&lt;select&gt;
&lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
&lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
&lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
&lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
&lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
&lt;!--Unit Price--&gt;
&lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
&lt;!--Quantity--&gt;
&lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
&lt;!--Total--&gt;
&lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td class=&quot;background-colour&quot; colspan=&quot;5&quot;&gt;
&lt;/td&gt;
&lt;td class=&quot;background-colour&quot; colspan=&quot;2&quot;&gt;
&lt;input type=&quot;number&quot; name=&quot;Grand Total Price&quot; value=&quot;0.00&quot; class=&quot;GrandTotal&quot; disabled&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;

答案2

得分: 0

以下是您提供的代码的翻译：

您可以在所有输入元素上添加一个事件监听器：

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言：lang-js -->
// 获取所有输入元素
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("不允许负值！")
  }
}

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

<!-- 语言：lang-html -->

<h1>图书订购系统</h1>

<table id="myTable">
  <thead>
    <tr>
      <th>编号</th>
      <th>书名</th>
      <th>作者</th>
      <th>类别</th>
      <th>单价</th>
      <th>数量</th>
      <th>总计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="No">1</td>
      <!-- 书名 -->
      <td><input type="text" value=""></td>
      <!-- 作者 -->
      <td><input type="text" value=""></td>
      <!-- 类别 -->
      <td>
        <select>
          <option value="请选择类别..." disabled selected>请选择类别...</option>
          <option value="商业">商业</option>
          <option value="小说">小说</option>
          <option value="数学">数学</option>
          <option value="技术">技术</option>
        </select>
      </td>

      <!-- 单价 -->
      <td class="price"><input type="number" value="0.00"></td>
      <!-- 数量 -->
      <td class="quantity"><input type="number" value="0"></td>
      <!-- 总计 -->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">2</td>
      <!-- 书名 -->
      <td><input type="text" value=""></td>
      <!-- 作者 -->
      <td><input type="text" value=""></td>
      <!-- 类别 -->
      <td>
        <select>
          <option value="请选择类别..." disabled selected>请选择类别...</option>
          <option value="商业">商业</option>
          <option value="小说">小说</option>
          <option value="数学">数学</option>
          <option value="技术">技术</option>
        </select>
      </td>

      <!-- 单价 -->
      <td class="price"><input type="number" value="0.00"></td>
      <!-- 数量 -->
      <td class="quantity"><input type="number" value="0"></td>
      <!-- 总计 -->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">3</td>
      <!-- 书名 -->
      <td><input type="text" value=""></td>
      <!-- 作者 -->
      <td><input type="text" value=""></td>
      <!-- 类别 -->
      <td>
        <select>
          <option value="请选择类别..." disabled selected>请选择类别...</option>
          <option value="商业">商业</option>
          <option value="小说">小说</option>
          <option value="数学">数学</option>
          <option value="技术">技术</option>
        </select>
      </td>

      <!-- 单价 -->
      <td class="price"><input type="number" value="0.00"></td>
      <!-- 数量 -->
      <td class="quantity"><input type="number" value="0"></td>
      <!-- 总计 -->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">4</td>
      <!-- 书名 -->
      <td><input type="text" value=""></td>
      <!-- 作者 -->
      <td><input type="text" value=""></td>
      <!-- 类别 -->
      <td>
        <select>
          <option value="请选择类别..." disabled selected>请选择类别...</option>
          <option value="商业">商业</option>
          <option value="小说">小说</option>
          <option value="数学">数学</option>
          <option value="技术">技术</option>
        </select>
      </td>

      <!-- 单价 -->
      <td class="price"><input type="number" value="0.00"></td>
      <!-- 数量 -->
      <td class="quantity"><input type="number" value="0"></td>
      <!-- 总计 -->
      <td class="total"><input type="number" value="0.00" disabled></td>
    </tr>

    <tr>
      <td class="No">5</td>
      <!-- 书名 -->
      <td><input type="text" value=""></td>
      <!-- 作者 -->
      <td><input type="text" value=""></td>
      <!-- 类别 -->
      <td>
        <select>
          <option value="请选择类别..." disabled selected>请选择类别...</option>
          <option value="商业">商业</option>
          <option value="小说">小说</option>
          <option value="数学">数学</option>
          <option value="技术">技术</option>
        </select>
      </td>

      <!-- 单价 -->
      <td class="price"><input type="number" value="0.00"></td>
      <!-- 数量 -->
      <td class="quantity"><input type="number" value="0"></td>
     

<details>
<summary>英文:</summary>

You can add an event listener on input of all your inputs elements:



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

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

    inputs.forEach((input) =&gt; input.addEventListener(&#39;input&#39;, () =&gt; calculateTotal()))

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

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

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

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

        if (quantity &lt; 0 || price &lt; 0) {
          negative = true;
          quantity = 0;
          price = 0.00;
          quantityInput.value = &quot;0&quot;;
          priceInput.value = &quot;0.00&quot;;
        }

        let total = quantity * price;

        totalInput.value = total.toFixed(2);

        grandTotal += total;
      }

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

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

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;Book Ordering System&lt;/h1&gt;

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

          &lt;!--Unit Price--&gt;
          &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
          &lt;!--Quantity--&gt;
          &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
          &lt;!--Total--&gt;
          &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
          &lt;td class=&quot;No&quot;&gt;2&lt;/td&gt;
          &lt;!--Book Title--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Author--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Category--&gt;
          &lt;td&gt;
            &lt;select&gt;
              &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
              &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
              &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
              &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
              &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;

          &lt;!--Unit Price--&gt;
          &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
          &lt;!--Quantity--&gt;
          &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
          &lt;!--Total--&gt;
          &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
          &lt;td class=&quot;No&quot;&gt;3&lt;/td&gt;
          &lt;!--Book Title--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Author--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Category--&gt;
          &lt;td&gt;
            &lt;select&gt;
              &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
              &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
              &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
              &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
              &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;

          &lt;!--Unit Price--&gt;
          &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
          &lt;!--Quantity--&gt;
          &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
          &lt;!--Total--&gt;
          &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
          &lt;td class=&quot;No&quot;&gt;4&lt;/td&gt;
          &lt;!--Book Title--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Author--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Category--&gt;
          &lt;td&gt;
            &lt;select&gt;
              &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
              &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
              &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
              &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
              &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;

          &lt;!--Unit Price--&gt;
          &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
          &lt;!--Quantity--&gt;
          &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
          &lt;!--Total--&gt;
          &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
          &lt;td class=&quot;No&quot;&gt;5&lt;/td&gt;
          &lt;!--Book Title--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Author--&gt;
          &lt;td&gt;&lt;input type=&quot;text&quot; value=&quot;&quot;&gt;&lt;/td&gt;
          &lt;!--Category--&gt;
          &lt;td&gt;
            &lt;select&gt;
              &lt;option value=&quot;Please choose the category...&quot; disabled selected&gt;Please choose the category...&lt;/option&gt;
              &lt;option value=&quot;Business&quot;&gt;Business&lt;/option&gt;
              &lt;option value=&quot;Fiction&quot;&gt;Fiction&lt;/option&gt;
              &lt;option value=&quot;Mathematics&quot;&gt;Mathematics&lt;/option&gt;
              &lt;option value=&quot;Technology&quot;&gt;Technology&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;

          &lt;!--Unit Price--&gt;
          &lt;td class=&quot;price&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot;&gt;&lt;/td&gt;
          &lt;!--Quantity--&gt;
          &lt;td class=&quot;quantity&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0&quot;&gt;&lt;/td&gt;
          &lt;!--Total--&gt;
          &lt;td class=&quot;total&quot;&gt;&lt;input type=&quot;number&quot; value=&quot;0.00&quot; disabled&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;

      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td class=&quot;background-colour&quot; colspan=&quot;5&quot;&gt;
            &lt;button type=&quot;button&quot; onclick=&quot;updateGrandTotal()&quot; class=&quot;Button&quot;&gt;Calculate Grand Total Price&lt;/button&gt;
          &lt;/td&gt;
          &lt;td class=&quot;background-colour&quot; colspan=&quot;2&quot;&gt;
            &lt;input type=&quot;number&quot; name=&quot;Grand Total Price&quot; value=&quot;0.00&quot; class=&quot;GrandTotal&quot; disabled&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;



</details>

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在我在表格中输入值时立即更新总数？

问题

答案2

加载“外部”CSS（bootstrap）到特定的DIV。

滚动条在使用 overflow: hidden 时无法滚动

移动设备和平板电脑上的奇怪滚动行为

如何在不使用Bootstrap的情况下将图标和内容并排显示？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论