如何仅使用Onkeyup Javascript获取特定的列单元格值并求和该值

Question

I am new for Html, I created dynamic table with four cell(ItemName,Quantity,QuantityType,Amount). 我是Html的新手，我用四个单元格（ItemName，Quantity，QuantityType，Amount）创建了动态表。 I want sum only Amount(cell) in all the rows using onkeyup method and place that total value in another input box. 我只想使用onkeyup方法将所有行中的Amount（cell）求和并将该总值放在另一个输入框中。 If i edit value in Amount cell that also affect in sum value. 如果我在“数量”单元格中编辑值，这也会影响总和值。 I have delete button in each row if i click that also want to affect in sum. 如果我也想影响总和，则我在每行中都有删除按钮。 I want only javascript How to do. 我只想要javascript怎么办。

Please anyone help me! 请任何人帮助我！

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { background: red; margin: 5px; } table { border: 2px solid black; } td { padding: 10px; border: 1px solid lightgrey; } </style> <script> function createTable() { var numRows = document.getElementById('number').value; if (numRows == "") { alert("Please enter some numeric value"); } else { var th = document.querySelectorAll('#table th'); if (!th.length) { var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>"; var table = document.createElement('table'); table.innerHTML = rows; document.getElementById("table").appendChild(table.firstChild); } for (var i = 0; i < numRows; i++) { var elems = ''; elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i + 1) + "'></td><td><input type='button' class='del_img' onClick= 'delSpec(this)' value='Delete'></td></tr>"; var table = document.createElement('table'); table.innerHTML = elems; document.getElementById("table").appendChild(table.firstChild); } } } // window.onkeyup = keyup; //function myfunction(e) { //setting your input text to the global Javascript Variable for every key press function myfunction(e) { var inputTextValue = e, result = document.getElementById("total_amount").value, sum = 0; for(var i=0; i<inputTextValue.length; i++) { var ip = inputTextValue[i]; if (ip.name && ip.name.indexOf("total") < 0) { sum += parseInt(ip.value) || 0; } // sum = parseFloat(ip) + parseFloat(result); } document.getElementById("total_amount").value = sum; } function delSpec(node) { r=node.parentNode.parentNode; r.parentNode.removeChild(r); } </script> </head> <body> <input type="text" id="number" placeholder="Enter no.of rows"/> <button type="button" onclick='createTable()'>Click Me!</button> <table id="table" class="order-table table" name="table1" required> </table> <label>Sum:</label> <input type="text" id="total_amount" value="0"/> </body> </html>

Thanks in advance... 提前致谢...

Answer 1

Also modified your function a bit to get all quantities and amounts and sum them: 还对函数进行了一些修改，以获取所有数量和数量并对它们求和：

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { background: red; margin: 5px; } table { border: 2px solid black; } td { padding: 10px; border: 1px solid lightgrey; } </style> <script> function createTable() { var numRows = document.getElementById('number').value; if (numRows == "") { alert("Please enter some numeric value"); } else { var th = document.querySelectorAll('#table th'); if (!th.length) { var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>"; var table = document.createElement('table'); table.innerHTML = rows; document.getElementById("table").appendChild(table.firstChild); } for (var i = 0; i < numRows; i++) { var elems = ''; elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input class='amount' type='text' id='sum' onkeyup='myfunction()' name='" + "total".concat(i + 1) + "'></td><td><input type='button' class='del_img' onClick= 'delSpec(this)' value='Delete'></td></tr>"; var table = document.createElement('table'); table.innerHTML = elems; document.getElementById("table").appendChild(table.firstChild); } } } // window.onkeyup = keyup; //function myfunction(e) { //setting your input text to the global Javascript Variable for every key press function myfunction() { var sum = 0; var amounts = document.getElementsByClassName('amount'); for(var i=0; i<amounts .length; i++) { var a = +amounts[i].value; sum += parseFloat(a) || 0; } document.getElementById("total_amount").value = sum; } function delSpec(node) { r=node.parentNode.parentNode; r.parentNode.removeChild(r); myfunction(); } </script> </head> <body> <input type="text" id="number" placeholder="Enter no.of rows"/> <button type="button" onclick='createTable()'>Click Me!</button> <table id="table" class="order-table table" name="table1" required> </table> <label>Sum:</label> <input type="text" id="total_amount" value="0"/> </body> </html>

如何仅使用Onkeyup Javascript获取特定的列单元格值并求和该值

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-30 08:36:41

如何仅使用Onkeyup Javascript获取特定的列单元格值并求和该值

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-30 08:36:41

解决方案1
1 已采纳 2016-06-30 08:36:41