我如何讓我的 function 在我的桌子的每一行上工作？
[英]How do i get my function to work on every row of my table?
問題描述
我對 Javascript 非常陌生，並且一般都在編碼並且遇到了麻煩。 這是一個圖書訂購系統，當我按下時，它通過將單價和數量相乘來計算訂單價格。 必須在表中手動輸入單價和數量。 問題是我寫的 javascript function 只適用於最上面的行，它似乎不適用於其他行。 我能知道如何讓我的 function 與表格中的所有其他行一起使用嗎？
body{ font-family: 'Itim', cursive; background-image:url('../images/background.jpg') } table{ border-collapse: collapse; width: 90%; } tr,td{ border: 1px solid black; padding: 0.5rem; }.row{ text-align: center; background: skyblue; }.row1 td:nth-child(1) { text-align: right; }.row1:hover{ background-color: yellow; }.row1 select{ width: 100%; }.row2{ background: skyblue; } input{ width: 96.5%; } input td:nth-child(2,3){ text-align: left; } input[type="number"]{ text-align: right; } input.price:disabled{ background: silver; border: 2px solid black; text-align: right; color: black; } input[type=button]{ display: block; width: 18%; height: 25px; text-align: center; font-size: 12px; margin-right: 0; margin-left: auto; } input.totalprice{ background: silver; border: 2px solid black; display: block; text-align: right; color:black; height: 30px; width: 75%; margin-left: auto; margin-right: 0; font-size: 18px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
<html> <head> <title>Book Ordering System</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width", initial-scale="1.0"> <link rel="stylesheet" href="./css/book-oder.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet"> <script> function calculateTotal(){ var a = Number(document.getElementById('QTY').value); var b = Number(document.getElementById('PPRICE').value); var c = a * b; var total= document.getElementById('TOTAL'); total.value=c; } </script> </head> <body> <h1>Book Ordering System</h1> <table> <form action onclick="calculateTotal()"> <tr class="row"> <td><b>No.</b></td> <td><b>Book Tilte</b></td> <td><b>Author</b></td> <td><b>Category</b></td> <td><b>Unit Price</b></td> <td><b>Quantity</b></td> <td><b>Total</b></td> </tr> <tr class="row1"> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>4</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>5</td> <td><input type="text"></td> <td><input type="text"></td> <td> <select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input value="0.00" disabled class="price" name="TOTAL" id="TOTAL"></td> </tr> <tr class="row2"> <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()"> </td> <td colspan="2"><input class="totalprice" value="0.00" disabled ></td> </tr> </form> </table> </body> </html>
1 個解決方案
解決方案1
1 已采納 2022-06-11 09:49:26
更新：添加總和計算。
出現問題是因為您對頁面上的多個字段使用了 id。 但是 id 始終是唯一的。 如果您獲取字段，則必須迭代以計算行總和。
function calculateTotal(){ let sum = 0; const rows = document.querySelectorAll('.row1'); rows.forEach(r => { const a = Number(r.querySelector('.QTY').value); const b = Number(r.querySelector('.PPRICE').value); const c = a * b; sum += c; r.querySelector('.TOTAL').value = c; }); document.querySelector('.totalprice').value = sum; }
body{ font-family: 'Itim', cursive; background-image:url('../images/background.jpg') } table{ border-collapse: collapse; width: 90%; } tr,td{ border: 1px solid black; padding: 0.5rem; }.row{ text-align: center; background: skyblue; }.row1 td:nth-child(1) { text-align: right; }.row1:hover{ background-color: yellow; }.row1 select{ width: 100%; }.row2{ background: skyblue; } input{ width: 96.5%; } input td:nth-child(2,3){ text-align: left; } input[type="number"]{ text-align: right; } input.price:disabled{ background: silver; border: 2px solid black; text-align: right; color: black; } input[type=button]{ display: block; width: 18%; height: 25px; text-align: center; font-size: 12px; margin-right: 0; margin-left: auto; } input.totalprice{ background: silver; border: 2px solid black; display: block; text-align: right; color:black; height: 30px; width: 75%; margin-left: auto; margin-right: 0; font-size: 18px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
<h1>Book Ordering System</h1> <table> <form action onclick="calculateTotal()"> <tr class="row"> <td><b>No.</b></td> <td><b>Book Tilte</b></td> <td><b>Author</b></td> <td><b>Category</b></td> <td><b>Unit Price</b></td> <td><b>Quantity</b></td> <td><b>Total</b></td> </tr> <tr class="row1"> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>4</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" class="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>5</td> <td><input type="text"></td> <td><input type="text"></td> <td> <select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input value="0.00" disabled class="price TOTAL" name="TOTAL" ></td> </tr> <tr class="row2"> <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()"> </td> <td colspan="2"><input class="totalprice" value="0.00" disabled ></td> </tr> </form> </table>
我正在編寫一個Javascript函數來為表中的每一行着色不同的顏色。 為什么我的代碼不起作用？
[英]I am writing a Javascript function to to color every other row in a table a different color. Why doesn't my code work?
每次調用函數（JavaScript）時，如何檢查if / else語句？
[英]How do I make the if/else statement get checked every time my function is called (JavaScript)?
每次使用onmousemove函數移動鼠標時，如何更改背景圖像？
[英]how do I get my background image to change every time the mouse moves using the onmousemove function?
如何使頁面顯示函數完成時而不是每個函數完成時處理的數據
[英]How do I get my page to display data that my functions process as they finish rather than when every function finishes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.