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 summed separately sum of the values and sum percentage of this values to other texbox value
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>

Recommended Answers

All 16 Replies

Here's a revised sum function:

function sum(){
	var form=document.getElementById('eval_edit');
	if(!form) return;
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){
		var el = form['txtRow'+i];
		if(!el) continue;
		var txt = el.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var el2 = form['selRow'+i];
		var el3 = document.getElementById('txtRowe'+i);
		if(!el2 || !el3) alert('Error in calculating totals');
		var percent = Number(el2[el2.selectedIndex].value)/100;
		var tax = Number(txt) * percent;
		el3.innerHTML = tax.toFixed(2);

		s1 += Number(txt);
		s2 += tax;
	}
	if(form['total']){ form['total'].value = s1.toFixed(2); }
	if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}

This does everything necessary to calculate the tax for each row and to calculate the two sum totals (income and tax).

You will also need some changes to the add function. Rather than do the whole thing for you, here are some clues:

  1. Because tax is calculated not user-entered, you do not need input fields for tax. Instead, the revised sum() function puts the tax for each row directly into the tax cells. Make sure the tax cell is given id = 'txtRowe'+iteration .
  2. Ensure that el and sel are given a name and id (with identical values).
  3. In the select menu change the options values to : value="10" value="20" value="30"
  4. Get rid of "sum RowX" buttons (and their table cells). They are not necessary because the revised sum() function performs these calculations every time it is called.
  5. Add the following events:
    • el.onblur=sum;
    • sel.onchange=sum;

    This ensures that sum() is called each time the user makes a change, without the need to click the "Sum" button. For safety, it's best to have a "Sum" button too.

  6. Remove your hard-coded HTML row and call addrow(); in the anonymous onload function. This will guarantee that your first row is of identical format to other rows (easier to maintain).

Airshow

Thank you very very much
I just tried to test
but i cannot get anything
may be i do smth wrong
if possible can you do in full html format for me please
i know it is hard
thanks beforehand
every time i will say Let God Loves you

Azegurb,

Changes to the HTML are very simple. Changes to the addRow() function are a bit harder.

I must go out now - important birthday party (my neighbour's 70th) and may not get back her until Monday evening (GMT).

This should give you plenty of time to work through my instructions and fix the code for yourself. You may need to insert some debug statements to work out where it's going wrong. I'm sure you can do it on your own and I will check back here on Monday to see how you got on.

Airshow

I tried and i did as you said but i got nothink
i will wait for you
thank you
happy your neighbour birthday

Azegurb,

Neighbour's party was good, thank you.

Here is some code, but you must be sure to go through and see how it works. Learn from it, don't just accept it. I am sure you will.

<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 id="sheet" border="1">
	<tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
	</table>
</td>
</tr>
<tr>
<td align="center">
<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" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>&nbsp;INCOME SUM<br />
<input id="taxtotal" name="taxtotal" type="text"/>&nbsp;Tax SUM with desirable percent for ex: 20%
</td>
</tr>
</table>
</form>

</body>
function addrow(){
	var tbl = document.getElementById('sheet');
	var iteration = tbl.rows.length;
	var row=tbl.insertRow(iteration);

	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.id = 'txtRow'+iteration;
	el.size = 40;
	el.value = '0';
	el.onblur = sum;
	cellRight.appendChild(el);

	var cellRight1 = row.insertCell(2);
	cellRight1.id = 'txtRowe'+iteration;

	var cellRightsel = row.insertCell(3);
	var sel = document.createElement('select');
	sel.name = 'selRow' + iteration;
	sel.id = 'selRow' + iteration;
	sel.onchange = sum;
	sel.options[0] = new Option('10%', '10');
	sel.options[1] = new Option('20%', '20');
	sel.options[2] = new Option('30%', '30');
	cellRightsel.appendChild(sel);
	sum();
}

function sum(){
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){//loop through table rows
		var el1 = document.getElementById('txtRow'+i);//Row's Income field
		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
		var el3 = document.getElementById('txtRowe'+i);//Row's Tax cell
		if(!el1 || !el2 || !el3) continue;
		var txt = el1.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var tax = Number(txt) * Number(el2[el2.selectedIndex].value)/100;
		el3.innerHTML = tax.toFixed(2);
		s1 += Number(txt);
		s2 += tax;
	}
	var t1 = document.getElementById('total');
	var t2 = document.getElementById('taxtotal');
	if(t1){ t1.value = s1.toFixed(2); }
	if(t2){ t2.value = s2.toFixed(2); }
}

onload = function(){
	addrow();
}

Airshow

Hi,
Airshow
I just tried this code so i inputted this code into HTML form
before we created
but nothing are got
I tried it with your suggested HTML code
in this code there are also some missing
so my code are here below
pls see it if possible
may i suggest smth to you may be we create Percent function separate or it is not needed

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  
<head> 
  <title></title>function addrow(){
	var tbl = document.getElementById('sheet');
	var iteration = tbl.rows.length;
	var row=tbl.insertRow(iteration);

	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.id = 'txtRow'+iteration;
	el.size = 40;
	el.value = '0';
	el.onblur = sum;
	cellRight.appendChild(el);

	var cellRight1 = row.insertCell(2);
	cellRight1.id = 'txtRowe'+iteration;

	var cellRightsel = row.insertCell(3);
	var sel = document.createElement('select');
	sel.name = 'selRow' + iteration;
	sel.id = 'selRow' + iteration;
	sel.onchange = sum;
	sel.options[0] = new Option('10%', '10');
	sel.options[1] = new Option('20%', '20');
	sel.options[2] = new Option('30%', '30');
	cellRightsel.appendChild(sel);
	sum();
}

function sum(){
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){//loop through table rows
		var el1 = document.getElementById('txtRow'+i);//Row's Income field
		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
		var el3 = document.getElementById('txtRowe'+i);//Row's Tax cell
		if(!el1 || !el2 || !el3) continue;
		var txt = el1.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var tax = Number(txt) * Number(el2[el2.selectedIndex].value)/100;
		el3.innerHTML = tax.toFixed(2);
		s1 += Number(txt);
		s2 += tax;
	}
	var t1 = document.getElementById('total');
	var t2 = document.getElementById('taxtotal');
	if(t1){ t1.value = s1.toFixed(2); }
	if(t2){ t2.value = s2.toFixed(2); }
}

onload = function(){
	addrow();
}
</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> 

<tr> 
<td> 
1 
</td> 
<td><input sumMe="1" type="text" name="txtRow1" id="txtRow1" size="40" /></td><tr>
<tr>
<td><input sumMe1="1" type="text" name="txtRowe1" id="txtRowe1" size="40" /> </td> 
<td> 
<select name="selRow0"> 
<option value="10">10%</option> 
<option value="20">20%</option> 
<option value="30">30%</option> 
</select> 
</td> 
</tr> 
</table> 
 <input name="total" type="text"/> 
<!--- 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="button" value="SUM1" onClick="sum1()"/> 
<input type="submit" value="Submit" /> 
</td> <td><input name="taxtotal" type="text"/></td>
</tr> 
</table> 
</form> 
  
</body> 
  
</html>

Azegurb,

Two problems here:

  1. There's no opening <script> tag.
  2. You are trying to run the new javascript with a hybrid of your old <body>...</body> with only some of my new <body>...</body> inserted into it. Try using my <body>...</body> is its entirity.

I know it works because I have tested it in IE and FF.

You could do the percent calculation in a separate function if you wish but it's so simple (one line) that it's not really necessary. In my experience, it's best to perform all calculations on every occasion, otherwise there's a chance the whole thing will get out of synchronisation. You should never rely on the user clicking two or more buttons in the right sequence. On modern computers of even very modest performance, javascript runs so fast ther'e no penalty for calculations of this manitude. You would need a hundred rows or more before the user would start to notice the calculation delay.

Airshow

I am very please
pls insert full HTML format
because i just tested as you said
but nothing is got
there you missed select options
Thank you for your attention

Azegurb,

The HTML is complete. The first row is added dynamically by onload = function(){addrow();} . See my point 6 in post #2 above.

Here's what to do:

  1. Start with a fresh HTML template as follows:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <script>
    </script>
    </head>
    
    <body>
    </body>
    
    </html>
  2. Paste my javascript code between the <script>...</script> tags
  3. Paste your original removeRow() function below my addRow() function. (I haven't tested it).
  4. Paste the HTML from my post #6 above, replacing everything from <body> to </body>.
  5. Save the page.
  6. Open it in your browser.

I have tested in IE6, FF 3.5.2, and Opera 9.01.

Airshow

hi Airshow
you really nice person which forces the man to learn
you really worked hard for me, you really spent your gold time for me.
really i work the man such as you first time which really wants to work to someone.
My dear i tested but sorry i didn't get any result may be can you look at the code below full DHTML/JavaScript/ format
i want you post code like this if possible
I khow i worry you too much but if possible pls insert code like below i posted
pls look at this code. this code works. this code is written by another person for me ("in webdeveloper.com" by wfilips") but i dont understand this code
i wolud like to learn this from you and you really explain it good.
thank you very much

<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");
el.onBlur=sum;


cellRight.appendChild(el);

var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='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%','10');
sel.options[1]=new Option('20%','20');
sel.options[2]=new Option('30%','30');
sel.onchange=function(){ Percent(this); }
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);

}
</script>
<script>

function sum(){
 var form=document.getElementById('eval_edit');
 var rows=document.getElementById('sheet').rows;
 for (var s=[0,0],z0=0;z0<rows.length;z0++){
  var ips=rows[z0].getElementsByTagName('INPUT');
  for (var z0a=0;z0a<ips.length;z0a++){
   ips[z0a].value=ips[z0a].value.replace(/[^0-9.]/g,'');
   if (ips[z0a].value){
    s[z0a]+=ips[z0a].value*1
   }
  }
 }
 if(form['total']){
  form['total'].value = s[0].toFixed(2);
 }
 if(form['taxtotal']){
  form['taxtotal'].value = s[1].toFixed(2);
 }
}


onload = function(){
sum();
}

</script>
<script  type="text/javascript">


function Percent(obj){
 var row=obj;
 while (row.parentNode&&row.nodeName!='TR'){
  row=row.parentNode;
 }
 var ips=row.getElementsByTagName('INPUT')
 ips[0].value=ips[0].value.replace(/[^0-9.]/g,'');
 ips[1].value='';
 if (ips[0].value){
  ips[1].value=(ips[0].value/100*obj.value).toFixed(2);
 }
}


</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" onchange="Percent(this); ">
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option></select></td></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>

So you've been cross-posting your problem on another forum and you want me to explain some other guy's code when you can't get my perfectly good code working?!?!?!

Sorry.

Airshow

no this not as you think
firstly i posted there
then i posted in Daniweb
but i posted it 3 weeks ago after then i posted to daniweb.com
you answered quckly but them
they answered after you post
thank you
simply so i bellieve you good proqrammist
eigther help me or not
thank you but you really stinted me

Azegurb,

Sorry I was blunt with you this morning. I'm sure you're a good chap but please remember, you will upset people by cross-posting other people's work on different forums and by starting multiple threads on a single topic.

I'm not so sure I am helping you by posting a whole solution - you would learn more by working at it - but here goes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>dinamik sheet</title>
<script>
function addrow(){
	var tbl = document.getElementById('sheet');
	var iteration = tbl.rows.length;
	var row=tbl.insertRow(iteration);

	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.id = 'txtRow'+iteration;
	el.size = 40;
	el.value = '0';
	el.onblur = sum;
	cellRight.appendChild(el);

	var cellRight1 = row.insertCell(2);
	cellRight1.id = 'txtRowe'+iteration;

	var cellRightsel = row.insertCell(3);
	var sel = document.createElement('select');
	sel.name = 'selRow' + iteration;
	sel.id = 'selRow' + iteration;
	sel.onchange = sum;
	sel.options[0] = new Option('10%', '10');
	sel.options[1] = new Option('20%', '20');
	sel.options[2] = new Option('30%', '30');
	cellRightsel.appendChild(sel);
	sum();
}

function sum(){
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){//loop through table rows
		var el1 = document.getElementById('txtRow'+i);//Row's Income field
		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
		var el3 = document.getElementById('txtRowe'+i);//Row's Tax cell
		if(!el1 || !el2 || !el3) continue;
		var txt = el1.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var tax = Number(txt) * Number(el2[el2.selectedIndex].value)/100;
		el3.innerHTML = tax.toFixed(2);
		s1 += Number(txt);
		s2 += tax;
	}
	var t1 = document.getElementById('total');
	var t2 = document.getElementById('taxtotal');
	if(t1){ t1.value = s1.toFixed(2); }
	if(t2){ t2.value = s2.toFixed(2); }
}

onload = function(){
	addrow();
}
</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 id="sheet" border="1">
	<tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
	</table>
</td>
</tr>
<tr>
<td align="center">
<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" /><br />
</td>
</tr>
<tr>
<td align="left">
<input id="total" name="total" type="text"/>&nbsp;INCOME SUM<br />
<input id="taxtotal" name="taxtotal" type="text"/>&nbsp;Tax SUM with desirable percent for ex: 20%
</td>
</tr>
</table>
</form>

</body>
</html>

You just need to paste in your removeRow() function - I can't find it.

Enjoy.

Airshow

thank you, Airshow
you helped me,
i will never forget that you helped me and i will never post my question on another forums and i will post my question on www.daniweb.com . if possible i will give my JavaScript questions to you everytime and i already suggested and preffered this site to many people which i know.
thanks, thanks, thanks

That's cool Azegurb. I look forward to seeing you in the future.

Airshow

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.