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

英文:

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

如何在React.js中使用React Router DOM导航到相同组件并传递不同的数据？

为什么这个程序没有打印任何内容？

addEventListener回调未从
#

确定