我如何让我的 function 在我的桌子的每一行上工作？
[英]How do i get my function to work on every row of my table?
问题描述
I'm extremely new to Javascript and coding in general and having trouble with this.
我对 Javascript 非常陌生，并且一般都在编码并且遇到了麻烦。 This is a book ordering system that calculates the price of an order by multiplying the unit price and quantity when I press.这是一个图书订购系统，当我按下时，它通过将单价和数量相乘来计算订单价格。 The unit prices and quantity have to be manually typed out in the table.必须在表中手动输入单价和数量。 The problem is the javascript function I wrote only worked with the the top most row and it does not seem to work with the other rows.问题是我写的 javascript function 只适用于最上面的行，它似乎不适用于其他行。 Can I know how do I get my function to work with all the other rows on the table?我能知道如何让我的 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
updated: Add total sum calculation.更新：添加总和计算。
Your problem occurs because you using id's for multiple fields on the page.出现问题是因为您对页面上的多个字段使用了 id。 But a id is always unique.但是 id 始终是唯一的。 If you fetch the fields then you have to iterate over to calculate the row sum.如果您获取字段，则必须迭代以计算行总和。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何让我的搜索功能从表格中过滤搜索到的项目？ - How do I get my search function work to filter searched items from table?
如何让移动 function 在我的游戏中工作？ - How do I get the move function to work in my game?
如何让我的删除 function 在 Vue JS 中工作？ - How do I get my delete function to work in Vue JS?
我正在编写一个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
如何使我的功能重启？ - How do I get my function to restart?
如何获取不带“ id”的表格行信息？ - How do i get my table's row information without an 'id'?
如何让 slideUp() 在表格行上按预期工作？ - How do I get slideUp() to work as intended on a table row?
相关标签