hikoo hikoo - 5 months ago 23
HTML Question

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

I am new for Html, I created dynamic table with four cell(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. 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.

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

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>