hi
I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased.
but i would like how create SUM function that automatically sums each added row value (text value)
here is the code
if possible please help me
Thanks beforehand

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  
<head> 
  <title></title> 
<script type="text/javascript"> 
/*<![CDATA[*/ 
  
function addRow() 
{ 
// grab the element, i.e. the table your editing, in this we're calling it 
// 'mySampleTable' and it is reffered to in the table further down on the page 
// with a unique of id of you guessed it, 'mySampleTable' 
var tbl = document.getElementById('mySampleTable'); 
// grab how many rows are in the table 
var lastRow = tbl.rows.length; 
  
// if there's no header row in the table (there should be, code at least one 
//manually!), then iteration = lastRow + 1 
var iteration = lastRow; 
// creates a new row 
var row = tbl.insertRow(lastRow); 
  
// left cell 
// insert a cell 
var cellLeft = row.insertCell(0); 
// here we're just using numbering the cell, like anything else you don't 
// have to use this, but i've kinda noticed users tend to like them 
var textNode = document.createTextNode(iteration); 
// takes what we did (create the plain text number) and appends it the cell 
// we created in the row we created. NEAT! 
cellLeft.appendChild(textNode); 
  
// right cell 
// another cell! 
var cellRight = row.insertCell(1); 
// creating an element this time, specifically an input 
var el = document.createElement('input'); 
// a data type of text 
el.type = 'text'; 
// the name of the element txtRow, and because this is dynamic we also 
// append the row number to it, so for example if this is the eigth row 
// being created the text box will have the name of txtRow8. super fantastic. 
el.name = 'txtRow' + iteration; 
// the exact same thing with a unique id 
el.id = 'txtRow' + iteration; 
// set it to size of 40. setting sizes is good. 
el.size = 40; 
  
// same thing as earlier, append our element to our freshly and clean cell 
cellRight.appendChild(el); 
  
// select cell 
// our last cell! 
var cellRightSel = row.insertCell(2); 
// create another element, this time a select box 
var sel = document.createElement('select'); 
// name it, once again with an iteration (selRow8 using the example above) 
sel.name = 'selRow' + iteration; 
// crates options in an array 
// the Option() function takes the first parameter of what is being displayed 
// from within the drop down, and the second parameter of the value it is carrying over 
sel.options[0] = new Option('text zero', 'value0'); 
sel.options[1] = new Option('text one', 'value1'); 
sel.options[2] = new Option('text two', 'value2'); 
// append our new element containing new options to our new cell 
cellRightSel.appendChild(sel); 
} 
  
function removeRow() 
{ 
// grab the element again! 
var tbl = document.getElementById('mySampleTable'); 
// grab the length! 
var lastRow = tbl.rows.length; 
// delete the last row if there is more than one row! 
if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
/*]]>*/ 
</script> 
  
<script type="text/javascript"> 
  
function sum(){ 
 } 
  
</script> 
</head> 
  
<body> 
<form action="miro.html" name="eval_edit" method="post" format="html"> 
<table align="center" width = "75%"> 
<tr> 
<td align = "center"> 
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! 
</td> 
</tr> 
<tr> 
<td align = "center"> 
<!--- very imporant to give the table an id ---> 
<!--- otherwise it won't know where to edit ---> 
<table border="1" id="mySampleTable"> 
<tr> 
<td> 
Lesson 
</td> 
<td> 
Title 
</td> 
<td> 
Instructor 
</td> 
</tr> 
<!--- i create the initial row by hand, there are a lot of ---> 
<!--- different ways to do this depending on what parsing ---> 
<!--- language you use, i found this was easiest for the ---> 
<!--- snippet, but experiment, do your thing mang. ---> 
<!--- this matches the same specs we laid out in the javascript ---> 
<tr> 
<td> 
1 
</td> 
<td> 
<input type="text" name="txtRow1" id="txtRow1" size="40" /></td> 
<td> 
<select name="selRow0"> 
<option value="value0">text zero</option> 
<option value="value1">text one</option> 
<option value="value2">text two</option> 
</select> 
</td> 
</tr> 
</table> 
 <input name="total" /> 
<!--- our buttons call our javascript functions when clicked ---> 
<input type="button" value="Add" onclick="addRow();" /> 
<input type="button" value="Remove" onclick="removeRow();" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> 
</td> 
</tr> 
</table> 
</form> 
  
</body> 
  
</html>

Recommended Answers

All 5 Replies

Azegurb,

I can't quite understand :

a) What do you want to sum - free text (in the Title fields) can be concatenated but not summed.
b) What you want to do with the result?
c) Could the sum function be performed server-side after the form is submitted?

Airshow

Hi Airshow
this table dynamically add rows (so that it creates empty textbox) with addrow button
I would like for ex. I added 10 rows (10 textbox) and i have one textbox (row) with a name sum. and when i pressed SUM button sum function sums all the textbox values into sum values.
if possible pls help me
Thanks beforehand

OK, but you need to take precautions to ensure that the entered values are numbers. The code below rejects non-numeric values and sums numeric values.

function sum(){
	var form = document.getElementById('eval_edit');
	if(!form) return;
	var fields = form.getElementsByTagName('input');
	var s = 0;//sum value
	for(var i=0; i<fields.length; i++){
		if( fields[i].getAttribute('sumMe') != "1" ) continue;//reject any field not carring the "sumMe" attribute
		var txt = fields[i].value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		s += Number(txt);
	}
	if(form['total']){ form['total'].value = s; }
}

You also need to make the following changes:

//-- Find
//el.size = 40;
//-- Add below
el.setAttribute('sumMe', "1");//set the custom "sumMe" attribute
//-- Find 
//if (lastRow > 2) tbl.deleteRow(lastRow - 1);
//-- Add below
sum();//Ensure that total is up to date after a deletion.
//-- Find
// </script>
//-- Add above
onload = function(){
	sum();
}
<!-- Change -->
<!--input type="text" name="txtRow1" id="txtRow1" size="40" /-->
<!-- To -->
<input sumMe="1" type="text" name="txtRow1" id="txtRow1" size="40" />

You will see that we use the custom HTML attribute sumMe to determine which input fields are subject to being summed.

Airshow

Thank you very much
you helped me great
Let God helps you as you helped me

Hello, I have one question again if i dont disturb you
thank you very much you helped me
with your help i created one table again and in this table i added some another options
for ex at the previous table there were only one problem sum of the dynamically added rows
in this beside sum i need to sum of the percent of this sum
for ex 10% of this dynamically added rows
for ex. i added ten rows and i entered different values into these rows. in front of each row there are different option of percent selection.
in row1 i added 1000 and chose from drop down box 10%
in row2 i added 2500 and chose from drop down box 30%
.............................................................
and so on
and finally i counted separately sum of the values and other texbox value i sum percentage of this values
if possible help me
thanks beforehands
here is code

<html><head><title>dinamik sheet</title>

<script>
function addrow(){
    
    var tbl=document.getElementById('sheet');
    var lastrow=tbl.rows.length;
    var iteration=lastrow;
    var row=tbl.insertRow(lastrow);
    var cellLeft=row.insertCell(0);
    var textNode=document.createTextNode(iteration);
    cellLeft.appendChild(textNode);
    var cellRight=row.insertCell(1);
    var el=document.createElement('input');
    el.type='text';
    el.name='txtRow'+iteration;
    el.size=40;
    el.setAttribute('sumMe',"1");
    cellRight.appendChild(el);
   
   var cellRight2=row.insertCell(2);
    var el1=document.createElement('input');
    el1.type='text';
    el1.name='txtRowe'+iteration;
    el1.size=40;
    el1.setAttribute('sumMe',"1");
    cellRight2.appendChild(el1);
   
   
   
   
   
    var cellRightsel=row.insertCell(3);
    var sel=document.createElement('select');
    sel.name='selRow'+iteration;
    sel.options[0]=new Option('10%','value0');
    sel.options[1]=new Option('20%','value1');
    sel.options[2]=new Option('30%','value2');
    cellRightsel.appendChild(sel);
    var cellRightsel2=row.insertCell(4);
    var sel1=document.createElement('input');
    sel1.type='button';
    sel1.value='sum row'+iteration;
    sel1.name='button'+iteration;
     cellRightsel2.appendChild(sel1);
}
</script>
<script>
function sum(){
    var form=document.getElementById('eval_edit');
    if(!form) return;
    var fields=form.getElementsByTagName('input');
    var s=0;
    for (var i=0;i<fields.length;i++){
        
        if( fields[i].getAttribute('sumMe') != "1" ) continue;//reject any field not carring the "sumMe" attribute
		var txt = fields[i].value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		s += Number(txt);
	}
	if(form['total']){ form['total'].value = s; }
}

onload = function(){
	sum();
}
    
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value0">10%</option>
<option value="value1">20%</option>
<option value="value2">30%</option></select></td><td><input type="button" name="button1" value="sum row1" id="button1"></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRow()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td> 
</tr> 
</table> 
</form> 
  
</body> 
  
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.