0

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>

Edited by peter_budo: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.

2
Contributors
5
Replies
9
Views
8 Years
Discussion Span
Last Post by azegurb
0

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

0

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

0

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

Edited by Airshow: n/a

0

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

0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.