CODEWITHSUNDEEP
javascripthtmldynamiccalculated-columns
Float2010
Float2010

Reputation: 21

Calculate Javascript with dynamically added rows

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.

Upvotes: 2

Views: 1253

Answers (1)

Ofer Haber
Ofer Haber

Reputation: 628

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.

Upvotes: 2

Related Questions