Question

15

calculate numbers in html table with javascript

rated 0 times [ 16] [ 1] / answers: 1 / hits: 22611 / 13 Years ago, fri, january 13, 2012, 12:00:00

I am working on a project where I need to calculate some numbers in html table with javascript. The user can add as much numbers as they need and once they click a button, they'll need to see the end sum.
I would like to know how I can do that with javascript, you can find the code below:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html xmlns=http://www.w3.org/1999/xhtml >

<head>

    <title>Javascript Calculator</title>



    <SCRIPT language=javascript>    

   function Calculate()

{

}

    function addRow()

    {

var table = document.getElementById('table');



var button = document.getElementsByTagName('input')[0];



button.onclick = function() {

    var clone = table.rows[table.rows.length - 2].cloneNode(true);

    clone.cells[0].firstChild.data =

        clone.cells[0].firstChild.data.replace(/(d+):/,function(str,g1) {

                                                           return (+g1 + 1) + ':';

                                                        });

    table.tBodies[0].appendChild(clone);

};

 }

    </SCRIPT>

</head>



<input type=button value='Add Row' onclick=addRow() />

<br /><br />

<table cellspacing=0 cellpadding=4 id=table>

<tbody>

<tr><td>Number 1:</td><td><input value=20 style=width:30px type=text  maxlength=2/></td></tr>

<tr><td>Number 2:</td><td><input value=25 style=width:30px type=text  maxlength=2/></td></tr>

</tbody>

<tfoot>

<tr><td style=border-top:solid 1px black;border-bottom:solid 1px black;>Sum:</td><td style=border-top:solid 1px black;border-bottom:solid 1px black;><div>45</div></td></tr>

    </tfoot>

</table>

<input type=button value='Recalculate Sum' onclick=Calculate() />

</body>

</html>

Any idea how I can solve this?
Thanks in advance, Laziale

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

addie

Add To Favorites

Follow

Total Points: 699

Total Questions: 89

Total Answers: 97

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 13 Years ago madelyn · Accepted Answer

You can loop through each input element in the table and grab the value.

function Calculate() {

    var table = document.getElementById('table');

    var items = table.getElementsByTagName('input');

    var sum = 0;

    for(var i=0; i<items.length; i++)

        sum += parseInt(items[i].value);

    var output = document.getElementById('sum');

    output.innerHTML = sum;

}

demo

The only change I made to the HTML was giving an ID to the output div.

<div id=sum>45</div>