简体   繁体   English

如何使用javascript从总金额中找到折扣

[英]how to find discount from total sum using javascript

I have a table that a user can dynamically add a row as needed.我有一个表,用户可以根据需要动态添加一行。 And as you can see underneath the table that is a sum of the last column's value which is dynamically added.正如您在表格下方所看到的,这是动态添加的最后一列值的总和。 I need to add two text boxes above the sum from that one textbox(name as discount) take input(as a number) from user and the second textbox(name as finalsum) display the output as the value(finalsum=sum-discount).我需要在该文本框的总和上方添加两个文本框(名称为折扣)从用户获取输入(作为数字),第二个文本框(名称为 finalsum)将输出显示为值(finalsum=sum-discount) . and if the user does not give any input value then the discount should be initially zero.如果用户没有给出任何输入值,那么折扣最初应该为零。 and the finalsum should be equal to sum和 finalsum 应该等于 sum

if you want more info let me know thank you!如果您想了解更多信息,请告诉我,谢谢! Any help will be greatly appreciated :)任何帮助将不胜感激 :)

 <html> <head> <title>Add/Remove dynamic rows in HTML table</title> <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 4) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = "row_" + rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } var listitems = row.querySelectorAll("input, select"); for (i = 0; i < listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('" + row.id + "')"); } } else { alert("Maximum Passenger per ticket is 4."); } } function calculate(elementID) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value; var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value; var total = mainRow.querySelectorAll("[name=total]")[0]; var myResult1 = myBox1 * myBox3; total.value = myResult1; // calculate the totale of every total var sumContainer = document.getElementById("totalOfTotals"); var totalContainers = document.querySelectorAll("[name=total]"), i; var sumValue = 0; for (i = 0; i < totalContainers.length; ++i) { sumValue += parseInt(totalContainers[i].value); } sumContainer.textContent = sumValue; } </script> </head> <body> <input type="button" value="Add" onClick="addRow('dataTable')" /> <table id="dataTable" class="form" border="1"> <tbody> <tr id="row_0"> <p> <td> <label>Quantity</label> <input type="number" required="required" name="qty" oninput="calculate('row_0')" /> </td> <td> <label for="sel">Price</label> <select name="sel" id="sel" oninput="calculate('row_0')" required> <option value="" disabled selected>Choose your option</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td> <label for="total">Total</label> <input type="text" required="required" class="small" name="total" /> </td> </p> </tr> </tbody> </table> <div> <tr> <span>Sum</span> <span id="totalOfTotals">0</span> </tr> </div> </body> </html>

Solution Here !!!解决方法在这里!!!

 <html> <head> <title>Add/Remove dynamic rows in HTML table</title> <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 4) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = "row_" + rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } var listitems = row.querySelectorAll("input, select"); for (i = 0; i < listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('" + row.id + "')"); } } else { alert("Maximum Passenger per ticket is 4."); } } function calculate(elementID) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value; var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value; var myBox4 = mainRow.querySelectorAll("[name=discount]")[0].value; var total = mainRow.querySelectorAll("[name=total]")[0]; var myResult1 = myBox1 * myBox3; total.value = myResult1-myBox4; // calculate the totale of every total var sumContainer = document.getElementById("totalOfTotals"); var totalContainers = document.querySelectorAll("[name=total]"), i; var sumValue = 0; for (i = 0; i < totalContainers.length; ++i) { sumValue += parseInt(totalContainers[i].value); } sumContainer.textContent = sumValue; } </script> </head> <body> <input type="button" value="Add" onClick="addRow('dataTable')" /> <table id="dataTable" class="form" border="1"> <tbody> <tr id="row_0"> <p> <td> <label>Quantity</label> <input type="number" required="required" name="qty" oninput="calculate('row_0')" /> </td> <td> <label for="sel">Price</label> <select name="sel" id="sel" oninput="calculate('row_0')" required> <option value="" disabled selected>Choose your option</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td> <label for="discount">Discount</label> <input type="text" required="required" class="small" name="discount" oninput="calculate('row_0')" /> </td> <td> <label for="total">Total</label> <input type="text" required="required" class="small" name="total" /> </td> </p> </tr> </tbody> </table> <div> <tr> <span>Sum</span> <span id="totalOfTotals">0</span> </tr> </div> </body> </html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM