Calculate Javascript with dynamically added rows

Question

I have a table that a user can dynamically add a row as needed. I need to add a text box underneath the table that will dynamically output the total of the last column using JavaScript. If the calculations can't be done dynamically then I can add a calculate button underneath the text box

    <HTML>
    <HEAD>

    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell2.appendChild(element2);

        var cell3 = row.insertCell(2);
            var element3 = document.createElement("input");
            element3.type = "text";
            cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
            var element4 = document.createElement("input");
            element4.type = "text";
            cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
            var element5 = document.createElement("input");
            element5.type = "text";
            cell5.appendChild(element5);

        var cell6 = row.insertCell(5);
            var element6 = document.createElement("input");
            element6.type = "text";
            cell6.appendChild(element6);

        var cell7 = row.insertCell(6);
            var element7 = document.createElement("input");
            element7.type = "text";
            cell7.appendChild(element7);
        }

    function Calculate(tableID) {????

    }

    </SCRIPT>
    </HEAD>
    <BODY>
<table id="dataTable">
<tr><td><input type="button" value="Add Row" onclick="addRow('dataTable')"/></td></tr>
<tr><td>Class Description</td><td>Class Code</td><td>Rate</td><td>Other</td><td>Final Rate</td><td>Exposure</td><td>Premium</td></tr>
<tr><td><input type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:50px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:80px" type="text"/></td><td><input style="width:90px" type="text"/></td></tr>
</table>
//Text box output total of Premium
</BODY>
</HTML>

Any help will be greatly appreciated.

Ofer Haber · Accepted Answer · 2014-04-24 15:42:47Z

2

An answer is provided in the Fiddle, you need to iterate on all the inputs and calculate the fields:

function Calculate(tableID) {
var inputs = document.querySelectorAll("#" + tableID + " input");
var total = 0;
for (var i = 0; i < inputs.length; i++) {
    if (!isNaN(parseInt(inputs[i].value))) {
        total += parseInt(inputs[i].value);
    }
}
alert(total)
}

http://jsfiddle.net/KK47L/

You can use the calculate function and reflect the results in another div/cell/alert.

answered Apr 24, 2014 at 15:42

Ofer Haber

6284 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

George Mauer Over a year ago

Always use the radix parameter: parseInt(x, 10). From Mdn:

If the input string begins with "0", radix is eight (octal) or 10 (decimal).  Exactly which radix is chosen is implementation-dependent.  ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet.  For this reason always specify a radix when using parseInt.

martincarlin87 Over a year ago

works but OP says it should calculate the last column, not each row.

Ofer Haber Over a year ago

What exactly needs to be calculated?

Float2010 Over a year ago

Just the total of the last column and output the results in a text box below the table

Ofer Haber Over a year ago

Ok, take only the "premium" inputs and calculate its total. fiddle updated.

Collectives™ on Stack Overflow

Calculate Javascript with dynamically added rows

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related