Dynamic table sum in javascript

Kiran_Dangol · November 18, 2010, 2:30am

Hi everbody,
I need help in given below code. I am trying to get total and grand total to the table.
What my problem is that my code is working for default shown table but when I insert new table dynamically then javascript code doesnot give total and grand total for that inserted row.

Please help me to solve the problem
Thanks in advance.

Here is full code:

[COLOR=“Blue”]
<style type=“text/css”>
input {
width:80px;
font-size:10px;
}
</style>
<script language=“javascript”>
//add more row
function addrow(r)
{
var table = document.getElementById(‘dataTable’);
var getrow=getrowno(r);

var row1 = table.insertRow(getrow);	
var cell0 =  row1.insertCell(0);
var cell1 = row1.insertCell(1); 
var cell2 = row1.insertCell(2); 
var cell3 = row1.insertCell(3); 
var cell4 = row1.insertCell(4); 
var cell5 = row1.insertCell(5);
var cell6 = row1.insertCell(6); 
cell0.innerHTML = '&lt;input type="text" name="a'+getrow+'"&gt;';
cell1.innerHTML = '&lt;input type="text" name="q'+getrow+'" onkeypress="return isNumberKey(event)" onkeyup=" return result(event)"&gt;';
cell2.innerHTML = '&lt;input type="text" name="r'+getrow+'" onkeypress="return isNumberKey(event)" onkeyup=" return result(event)"&gt;';
cell3.innerHTML = '&lt;input type="text" name="u'+getrow+'" onkeypress="return isNumberKey(event)" onkeyup=" return result(event)"&gt;';
cell4.innerHTML = '&lt;input type="text" name="w'+getrow+'" readonly="readonly" onkeypress="return isNumberKey(event)"&gt;';
cell5.innerHTML = '&lt;input type="text" name="t'+getrow+'" readonly="readonly" onkeypress="return isNumberKey(event)"&gt;';
cell6.innerHTML = '&lt;input type="button" name="del_row" id="del_row" value="Delete This" onclick="removeRow(this)" /&gt;';

}

//remove row
function removeRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById(‘dataTable’).deleteRow(i);
}

//get row number
function getrowno(r)
{
return r.parentNode.parentNode.rowIndex;
}

// check integer
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;

}

//return calculation
function result(evt)
{
var sum=0;
var rowcount=4;
var qk=parseInt(document.getElementById(‘q’+rowcount).value);
while(rowcount<100)
{
var qty=parseInt(document.getElementById(‘q’+rowcount).value);
var rating=parseInt(document.getElementById(‘r’+rowcount).value);
var usage=parseInt(document.getElementById(‘u’+rowcount).value);

	if(document.getElementById('q'+rowcount).value=="" && document.getElementById('r'+rowcount).value=="" && document.getElementById('u'+rowcount).value=="")
	{
		document.getElementById('w'+rowcount).value=null;
		document.getElementById('t'+rowcount).value=null;
	}
	else if(document.getElementById('q'+rowcount).value=="" || document.getElementById('r'+rowcount).value=="" || document.getElementById('u'+rowcount).value=="")
	{
		document.getElementById('w'+rowcount).value=0
		document.getElementById('t'+rowcount).value=0;
	}
	else
	{
		document.getElementById('w'+rowcount).value=rating*usage;
		document.getElementById('t'+rowcount).value=rating*usage*qty;
		sum+=parseInt(document.getElementById('t'+rowcount).value);
		document.getElementById('total').value=sum;
		//document.getElementById('total').value+=parseInt(document.getElementById('t'+rowcount).value);
	}	
	rowcount++;	
}
return true;

}

</script>
<form name=“form1” method=“post” action=“”>
<table width=“400” border=“0” cellspacing=“0” cellpadding=“0” id=“dataTable”>
<tr>
<td colspan=“6” align=“center” valign=“top”><h3>Energy Calculator </h3></td>
</tr>
<tr>
<td colspan=“6” valign=“top”>Your solar energy requirement system is: </td>
</tr>
<tr>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
</tr>
<tr>
<td align=“center” valign=“top”><strong>Appliciances</strong></td>
<td align=“center” valign=“top”><strong>Qty</strong></td>
<td align=“center” valign=“top”><strong>Rating (W) </strong></td>
<td align=“center” valign=“top”><strong>Usage (h) </strong></td>
<td align=“center” valign=“top”><strong>Wh/day each </strong></td>
<td align=“center” valign=“top”><strong>Total Wh/day</strong></td>
</tr>
<tr>
<td valign=“top”><input name=“textfield27” type=“text” value=“Lamp” readonly=“readonly”></td>
<td valign=“top”>
<input type=“text” name=“q4” onkeypress=“return isNumberKey(event)” id=“q4” onkeyup=" return result(event)“>
</td>
<td valign=“top”><input type=“text” name=“r4” onkeypress=“return isNumberKey(event)” id=“r4” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“u4” onkeypress=“return isNumberKey(event)” id=“u4” onkeyup=” return result(event)" ></td>
<td valign=“top”><input type=“text” name=“w4” readonly=“readonly” onkeypress=“return isNumberKey(event)” id=“w4”></td>
<td valign=“top”><input type=“text” name=“t4” readonly=“readonly” onkeypress=“return isNumberKey(event)” id=“t4”></td>
</tr>
<tr>
<td valign=“top”><input name=“textfield28” type=“text” value=“Computer” readonly=“readonly”></td>
<td valign=“top”><input type=“text” name=“q5” onkeypress=“return isNumberKey(event)” id=“q5” onkeyup=" return result(event)“></td>
<td valign=“top”><input type=“text” name=“r5” onkeypress=“return isNumberKey(event)” id=“r5” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“u5” onkeypress=“return isNumberKey(event)” id=“u5” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“w5” readonly=“readonly” id=“w5”></td>
<td valign=“top”><input type=“text” name=“t5” readonly=“readonly” id=“t5”></td>
</tr>
<tr>
<td valign=“top”><input name=“textfield29” type=“text” value=“Television” readonly=“readonly”></td>
<td valign=“top”><input type=“text” name=“q6” onkeypress=“return isNumberKey(event)” id=“q6” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“r6” onkeypress=“return isNumberKey(event)” id=“r6” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“u6” onkeypress=“return isNumberKey(event)” id=“u6” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“w6” readonly=“readonly” id=“w6”></td>
<td valign=“top”><input type=“text” name=“t6” readonly=“readonly” id=“t6”></td>
</tr>
<tr>
<td valign=“top”><input name=“textfield30” type=“text” value=“Radio” readonly=“readonly”></td>
<td valign=“top”><input type=“text” name=“q7” onkeypress=“return isNumberKey(event)” id=“q7” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“r7” onkeypress=“return isNumberKey(event)” id=“r7” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“u7” onkeypress=“return isNumberKey(event)” id=“u7” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“w7” readonly=“readonly” id=“w7”></td>
<td valign=“top”><input type=“text” name=“t7” readonly=“readonly” id=“t7”></td>
</tr>
<tr>
<td valign=“top”><input name=“textfield31” type=“text” value=“Fridge” readonly=“readonly”></td>
<td valign=“top”><input type=“text” name=“q8” onkeypress=“return isNumberKey(event)” id=“q8” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“r8” onkeypress=“return isNumberKey(event)” id=“r8” onkeyup=” return result(event)“></td>
<td valign=“top”><input type=“text” name=“u8” onkeypress=“return isNumberKey(event)” id=“u8” onkeyup=” return result(event)"></td>
<td valign=“top”><input type=“text” name=“w8” readonly=“readonly” id=“w8”></td>
<td valign=“top”><input type=“text” name=“t8” readonly=“readonly” id=“t8”></td>
</tr>
<tr>
<td valign=“top”>
<input type=“button” name=“Submit” value=“Add Other” onclick=“addrow(this)”>
</td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
</tr>
<tr>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td align=“right” valign=“top”><input type=“submit” name=“Submit2” value=“Total Energy”></td>
<td valign=“top”>
<input name=“total” type=“text” id=“total” readonly=“readonly”>
<br>
(Your total energy requirement)
</td>
</tr>
<tr>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
<td valign=“top”> </td>
</tr>
</table>
</form>
[/COLOR]

Paul_Wilkins · November 18, 2010, 4:02am

First, remove the inline event attributes. Use traditional javascript events instead, because the inline ones are not helping you.

The fields that start with q, r, and u all have use an onkeypress and onkeyup event.

We can simplify this to a single event of each type on the form. If the field name starts with the appropriate character, and us followed by one or more digits, we can apply the appropriate method for that field.

Or in other words, fields matching this regular expression: /^[1]\d+/ will be affected.

We’ll place the script that attaches these events at the end of the body, just before the </body> tag.

I’ll make some changes, do some tests, and post an update shortly.

qru ↩︎

Paul_Wilkins · November 18, 2010, 5:18am

The form will need an id attribute to identify the form. Currently the form has a name attribute on the form tag, which provides no benefit at all. I suggest we add an identifier to the form tag instead, perhaps with a more appropriate value of “energyCalculator”


<form id="energyCalculator" method="post" action="">

so that scripts can easily target the form.

The onkeypress and onkeyup events are removed from all the form fields, so that they instead look like this:


<td valign="top"><input type="text" name="r4"></td>

This script is placed at the end of the body to attach onkeypress and onkeyup events to the form. You may want to rename form1 to a more descriptive identifier for your form.

This is the function does most of the work. When it’s attached to the form as a whole, this code gets the element, if it’s a #text node (as it could be on opera) we go up to an element node, and we check that it’s a form input field.

Then we check that the name of the input field starts with q, r, or u, and is followed by 1 or more digits, before returning the isNumber function


var form = document.getElementById('energyCalculator');
form.onkeypress = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'INPUT') {
        if (/^[qru]\\d+/.exec(targ.name)) {
            return isNumberKey(evt);
        }
    }
};

The onkeyup event doesn’t need to be restricted entirely to the quantity, rating and usage fields, so we can use a standard event assignment for that.


form.onkeyup = result;

We can also get rid of the onclick events, which will also be a problem for the added elements, and replace them with the following to handle adding and deleting rows:


form.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.type === 'button') {
        if (targ.value === 'Add Other') {
            return addrow(targ);
        } else if (targ.name === 'del_row') {
            return removeRow(targ);
        }
    }
};

Also, because your result() function is throwing errors, I’ve added the following check to the while loop.


if (!document.getElementById('q' + rowcount)) {
    rowcount++;
    continue;
}

Here’s the whole lot together as a test page:


<style type="text/css">
input {
width:80px;
font-size:10px;
}
</style>
<form id="energyCalculator" method="post" action="">
<table width="400" border="0" cellspacing="0" cellpadding="0" id="dataTable">
<tr>
<td colspan="6" align="center" valign="top"><h3>Energy Calculator </h3></td>
</tr>
<tr>
<td colspan="6" valign="top">Your solar energy requirement system is: </td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="top"><strong>Appliciances</strong></td>
<td align="center" valign="top"><strong>Qty</strong></td>
<td align="center" valign="top"><strong>Rating (W) </strong></td>
<td align="center" valign="top"><strong>Usage (h) </strong></td>
<td align="center" valign="top"><strong>Wh/day each </strong></td>
<td align="center" valign="top"><strong>Total Wh/day</strong></td>
</tr>
<tr>
<td valign="top"><input name="textfield27" type="text" value="Lamp" readonly="readonly"></td>
<td valign="top">
<input type="text" name="q4" id="q4">
</td>
<td valign="top"><input type="text" name="r4" id="r4"></td>
<td valign="top"><input type="text" name="u4" id="u4" ></td>
<td valign="top"><input type="text" name="w4" readonly="readonly" id="w4"></td>
<td valign="top"><input type="text" name="t4" readonly="readonly" id="t4"></td>
</tr>
<tr>
<td valign="top"><input name="textfield28" type="text" value="Computer" readonly="readonly"></td>
<td valign="top"><input type="text" name="q5" id="q5"></td>
<td valign="top"><input type="text" name="r5" id="r5"></td>
<td valign="top"><input type="text" name="u5" id="u5"></td>
<td valign="top"><input type="text" name="w5" readonly="readonly" id="w5"></td>
<td valign="top"><input type="text" name="t5" readonly="readonly" id="t5"></td>
</tr>
<tr>
<td valign="top"><input name="textfield29" type="text" value="Television" readonly="readonly"></td>
<td valign="top"><input type="text" name="q6" id="q6"></td>
<td valign="top"><input type="text" name="r6" id="r6"></td>
<td valign="top"><input type="text" name="u6" id="u6"></td>
<td valign="top"><input type="text" name="w6" readonly="readonly" id="w6"></td>
<td valign="top"><input type="text" name="t6" readonly="readonly" id="t6"></td>
</tr>
<tr>
<td valign="top"><input name="textfield30" type="text" value="Radio" readonly="readonly"></td>
<td valign="top"><input type="text" name="q7" id="q7"></td>
<td valign="top"><input type="text" name="r7" id="r7"></td>
<td valign="top"><input type="text" name="u7" id="u7"></td>
<td valign="top"><input type="text" name="w7" readonly="readonly" id="w7"></td>
<td valign="top"><input type="text" name="t7" readonly="readonly" id="t7"></td>
</tr>
<tr>
<td valign="top"><input name="textfield31" type="text" value="Fridge" readonly="readonly"></td>
<td valign="top"><input type="text" name="q8" id="q8"></td>
<td valign="top"><input type="text" name="r8" id="r8"></td>
<td valign="top"><input type="text" name="u8" id="u8"></td>
<td valign="top"><input type="text" name="w8" readonly="readonly" id="w8"></td>
<td valign="top"><input type="text" name="t8" readonly="readonly" id="t8"></td>
</tr>
<tr>
<td valign="top">
<input type="button" name="Submit" value="Add Other">
</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td align="right" valign="top"><input type="submit" name="Submit2" value="Total Energy"></td>
<td valign="top">
<input name="total" type="text" id="total" readonly="readonly">
<br>
(Your total energy requirement)
</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>
</form>
<script>
//add more row
function addrow(r) {
    var table = document.getElementById('dataTable');
    var getrow = getrowno(r);
    var row1 = table.insertRow(getrow);
    var cell0 = row1.insertCell(0);
    var cell1 = row1.insertCell(1);
    var cell2 = row1.insertCell(2);
    var cell3 = row1.insertCell(3);
    var cell4 = row1.insertCell(4);
    var cell5 = row1.insertCell(5);
    var cell6 = row1.insertCell(6);
    cell0.innerHTML = '<input type="text" name="a' + getrow + '">';
    cell1.innerHTML = '<input type="text" name="q' + getrow + '">';
    cell2.innerHTML = '<input type="text" name="r' + getrow + '">';
    cell3.innerHTML = '<input type="text" name="u' + getrow + '">';
    cell4.innerHTML = '<input type="text" name="w' + getrow + '" readonly="readonly">';
    cell5.innerHTML = '<input type="text" name="t' + getrow + '" readonly="readonly">';
    cell6.innerHTML = '<input type="button" name="del_row" id="del_row" value="Delete This" />';
}
//remove row
function removeRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById('dataTable').deleteRow(i);
}
//get row number
function getrowno(r) {
    return r.parentNode.parentNode.rowIndex;
}
// check integer
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
    return true;
}
//return calculation
function result(evt) {
    var sum = 0;
    var rowcount = 4;
    var qk = parseInt(document.getElementById('q' + rowcount).value);
    while (rowcount < 100) {
    if (!document.getElementById('q' + rowcount)) {
        rowcount++;
        continue;
    }
        var qty = parseInt(document.getElementById('q' + rowcount).value);
        var rating = parseInt(document.getElementById('r' + rowcount).value);
        var usage = parseInt(document.getElementById('u' + rowcount).value);
        if (document.getElementById('q' + rowcount).value == "" && document.getElementById('r' + rowcount).value == "" && document.getElementById('u' + rowcount).value == "") {
            document.getElementById('w' + rowcount).value = null;
            document.getElementById('t' + rowcount).value = null;
        }
        else if (document.getElementById('q' + rowcount).value == "" || document.getElementById('r' + rowcount).value == "" || document.getElementById('u' + rowcount).value == "") {
            document.getElementById('w' + rowcount).value = 0
            document.getElementById('t' + rowcount).value = 0;
        }
        else {
            document.getElementById('w' + rowcount).value = rating * usage;
            document.getElementById('t' + rowcount).value = rating * usage * qty;
            sum += parseInt(document.getElementById('t' + rowcount).value);
            document.getElementById('total').value = sum;
            //document.getElementById('total').value+=parseInt(document.getElementById('t'+r owcount).value);
        }
        rowcount++;
    }
    return true;
}

// filter quantity, rating, and usage values to only numbers
var form = document.getElementById('energyCalculator');
form.onkeypress = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.nodeType === 1 && targ.nodeName === 'INPUT') {
        if (/^[qru]\\d+/.exec(targ.name)) {
            return isNumberKey(evt);
        }
    }
};

// update result
form.onkeyup = result;

// add and delete rows
form.onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeType === 3) {
        targ = targ.parentNode;
    }
    if (targ.type === 'button') {
        if (targ.value === 'Add Other') {
            return addrow(targ);
        } else if (targ.name === 'del_row') {
            return removeRow(targ);
        }
    }
};
</script>

Kiran_Dangol · November 18, 2010, 6:01am

hi everybody,
thanks for all of u for trying for me.
anyway i have solved myself and i have seen your suggestion also.
its good.

thank you once again.

Topic		Replies	Views
Auto Calculating Dynamic Fields using Javascript JavaScript	0	642	February 28, 2011
Auto Calculating Dynamic Feilds JavaScript	1	1491	February 28, 2011
Calculating total in dynamic rows JavaScript	3	7129	July 29, 2011
Sum of array elements JavaScript	3	9812	March 22, 2011
How to add dynamic rows into table rows? Get Started	6	1825	October 8, 2014

Dynamic table sum in javascript

Related topics