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

【问题标题】：How to get particular column cell values and sum that value using Onkeyup only Javascript如何仅使用 Onkeyup Javascript 获取特定的列单元格值并求和该值
【发布时间】：2016-06-30 08:20:40
【问题描述】：

我是 Html 新手，我创建了包含四个单元格（ItemName、Quantity、QuantityType、Amount）的动态表。我只想使用 onkeyup 方法对所有行中的 Amount(cell) 求和，并将该总值放在另一个输入框中。如果我在金额单元格中编辑值，也会影响总和值。如果我点击它也想影响总和，我在每一行都有删除按钮。我只想要javascript 怎么办。

请任何人帮助我！

<!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>

提前谢谢...

【问题讨论】：

将onkeyup="myfunction(event)" 属性添加到您要重新计算的inputs。

标签： javascript html

【解决方案1】：

还稍微修改了您的函数以获取所有数量和金额并将它们相加：

<!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>

【讨论】：

我不想得到数量和金额值...我只想合计金额
我已经更新了代码。是的，它以前使用数量 * 数量。
为什么，你做数量 * 数量.. 我没有那样问......我不想要数量 * 数量......我只想在 keyup 时对数量值求和..
我已经改变了我的答案。阅读。
好的..它的工作，但如果删除行意味着总和值不影响，如果我给十进制值意味着也没有影响......如何解决这个问题