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

How to get particular column cell values and sum that value using Onkeyup only Javascript

本文关键字：Onkeyup Javascript 求和 何获得 单元格      更新时间：2023-09-26

我是新的Html，我创建了四个单元格的动态表(ItemName,Quantity,QuantityType,Amount)。我想要sum仅金额(单元格)在所有的行使用onkeyup方法，并在另一个输入框中放置总价值。如果我编辑金额单元格中的值，也会影响总和值。我有删除按钮在每一行，如果我点击，也想在总和中影响。我只需要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>

还修改了您的函数，以获得所有数量和金额并将它们相加:

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

相关文章：