JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

help with dynamic table options

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
1 2

•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

help with dynamic table options

 
-1
  #1
Sep 26th, 2009
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 Syntax (Toggle Plain Text) 
  1. <html><head><title>dinamik sheet</title>
  2.  
  3. <script>
  4. function addrow(){
  5.  
  6.     var tbl=document.getElementById('sheet');
  7.     var lastrow=tbl.rows.length;
  8.     var iteration=lastrow;
  9.     var row=tbl.insertRow(lastrow);
  10.     var cellLeft=row.insertCell(0);
  11.     var textNode=document.createTextNode(iteration);
  12.     cellLeft.appendChild(textNode);
  13.     var cellRight=row.insertCell(1);
  14.     var el=document.createElement('input');
  15.     el.type='text';
  16.     el.name='txtRow'+iteration;
  17.     el.size=40;
  18.     el.setAttribute('sumMe',"1");
  19.     cellRight.appendChild(el);
  20.  
  21.    var cellRight2=row.insertCell(2);
  22.     var el1=document.createElement('input');
  23.     el1.type='text';
  24.     el1.name='txtRowe'+iteration;
  25.     el1.size=40;
  26.     el1.setAttribute('sumMe',"1");
  27.     cellRight2.appendChild(el1);
  28.  
  29.  
  30.  
  31.  
  32.  
  33.     var cellRightsel=row.insertCell(3);
  34.     var sel=document.createElement('select');
  35.     sel.name='selRow'+iteration;
  36.     sel.options[0]=new Option('10%','value0');
  37.     sel.options[1]=new Option('20%','value1');
  38.     sel.options[2]=new Option('30%','value2');
  39.     cellRightsel.appendChild(sel);
  40.     var cellRightsel2=row.insertCell(4);
  41.     var sel1=document.createElement('input');
  42.     sel1.type='button';
  43.     sel1.value='sum row'+iteration;
  44.     sel1.name='button'+iteration;
  45.      cellRightsel2.appendChild(sel1);
  46. }
  47. </script>
  48. <script>
  49. function sum(){
  50.     var form=document.getElementById('eval_edit');
  51.     if(!form) return;
  52.     var fields=form.getElementsByTagName('input');
  53.     var s=0;
  54.     for (var i=0;i<fields.length;i++){
  55.  
  56.         if( fields[i].getAttribute('sumMe') != "1" ) continue;//reject any field not carring the "sumMe" attribute
  57. 		var txt = fields[i].value;
  58. 		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  59. 		s += Number(txt);
  60. 	}
  61. 	if(form['total']){ form['total'].value = s; }
  62. }
  63.  
  64. onload = function(){
  65. 	sum();
  66. }
  67.  
  68. </script>
  69. </head>
  70. <body>
  71. <form name="eval_edit" method="POST">
  72. <table align="center" width="75%">
  73. <tr>
  74. <td align="center">Balance sheet</td></tr>
  75. <tr><td align="center">
  76. <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
  77. <tr><td>1</td>
  78. <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>
  79. <td><select name="selRow0">
  80. <option value="value0">10%</option>
  81. <option value="value1">20%</option>
  82. <option value="value2">30%</option></select></td><td><input type="button" name="button1" value="sum row1" id="button1"></tr></table>
  83. INCOME SUM<input name="total" type="text"/>
  84. <input type="button" value="Add" onclick="addrow()" /> 
  85. <input type="button" value="Remove" onclick="removeRow()" /> 
  86. <input type="button" value="SUM" onClick="sum()"/> 
  87. <input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
  88. </td> 
  89. </tr> 
  90. </table> 
  91. </form> 
  92.  
  93. </body> 
  94.  
  95. </html>
Last edited by peter_budo; Sep 27th, 2009 at 8:27 am. Reason: Correcting openning tag
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 858
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: help with dynamic table options

 
0
  #2
Sep 26th, 2009
Here's a revised sum function:
javascript Syntax (Toggle Plain Text) 
  1. function sum(){
  2. 	var form=document.getElementById('eval_edit');
  3. 	if(!form) return;
  4. 	var s1 = 0;
  5. 	var s2 = 0;
  6. 	var tbl=document.getElementById('sheet');
  7. 	var iteration=tbl.rows.length-1;
  8. 	for(var i=1; i<=iteration; i++){
  9. 		var el = form['txtRow'+i];
  10. 		if(!el) continue;
  11. 		var txt = el.value;
  12. 		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  13. 		var el2 = form['selRow'+i];
  14. 		var el3 = document.getElementById('txtRowe'+i);
  15. 		if(!el2 || !el3) alert('Error in calculating totals');
  16. 		var percent = Number(el2[el2.selectedIndex].value)/100;
  17. 		var tax = Number(txt) * percent;
  18. 		el3.innerHTML = tax.toFixed(2);
  19.  
  20. 		s1 += Number(txt);
  21. 		s2 += tax;
  22. 	}
  23. 	if(form['total']){ form['total'].value = s1.toFixed(2); }
  24. 	if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
  25. }

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
Last edited by Airshow; Sep 26th, 2009 at 12:54 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

Re: help with dynamic table options

 
0
  #3
Sep 26th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 858
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: help with dynamic table options

 
0
  #4
Sep 26th, 2009
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
Last edited by Airshow; Sep 26th, 2009 at 2:53 pm.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

Re: help with dynamic table options

 
0
  #5
Sep 27th, 2009
I tried and i did as you said but i got nothink
i will wait for you
thank you
happy your neighbour birthday
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 858
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: help with dynamic table options

 
1
  #6
Sep 28th, 2009
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.

HTML Syntax (Toggle Plain Text) 
  1. <body>
  2. <form name="eval_edit" method="POST">
  3. <table align="center" width="75%">
  4. <tr>
  5. <td align="center">Balance sheet</td></tr>
  6. <tr>
  7. <td align="center">
  8. 	<table id="sheet" border="1">
  9. 	<tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
  10. 	</table>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td align="center">
  15. <input type="button" value="Add" onclick="addrow()" />
  16. <input type="button" value="Remove" onclick="removeRow()" />
  17. <input type="button" value="SUM" onClick="sum()"/>
  18. <input type="submit" value="Submit" /><br />
  19. </td>
  20. </tr>
  21. <tr>
  22. <td align="left">
  23. <input id="total" name="total" type="text"/>&nbsp;INCOME SUM<br />
  24. <input id="taxtotal" name="taxtotal" type="text"/>&nbsp;Tax SUM with desirable percent for ex: 20%
  25. </td>
  26. </tr>
  27. </table>
  28. </form>
  29.  
  30. </body>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function addrow(){
  2. 	var tbl = document.getElementById('sheet');
  3. 	var iteration = tbl.rows.length;
  4. 	var row=tbl.insertRow(iteration);
  5.  
  6. 	var cellLeft = row.insertCell(0);
  7. 	var textNode = document.createTextNode(iteration);
  8. 	cellLeft.appendChild(textNode);
  9.  
  10. 	var cellRight = row.insertCell(1);
  11. 	var el = document.createElement('input');
  12. 	el.type = 'text';
  13. 	el.name = 'txtRow'+iteration;
  14. 	el.id = 'txtRow'+iteration;
  15. 	el.size = 40;
  16. 	el.value = '0';
  17. 	el.onblur = sum;
  18. 	cellRight.appendChild(el);
  19.  
  20. 	var cellRight1 = row.insertCell(2);
  21. 	cellRight1.id = 'txtRowe'+iteration;
  22.  
  23. 	var cellRightsel = row.insertCell(3);
  24. 	var sel = document.createElement('select');
  25. 	sel.name = 'selRow' + iteration;
  26. 	sel.id = 'selRow' + iteration;
  27. 	sel.onchange = sum;
  28. 	sel.options[0] = new Option('10%', '10');
  29. 	sel.options[1] = new Option('20%', '20');
  30. 	sel.options[2] = new Option('30%', '30');
  31. 	cellRightsel.appendChild(sel);
  32. 	sum();
  33. }
  34.  
  35. function sum(){
  36. 	var s1 = 0;
  37. 	var s2 = 0;
  38. 	var tbl=document.getElementById('sheet');
  39. 	var iteration=tbl.rows.length-1;
  40. 	for(var i=1; i<=iteration; i++){//loop through table rows
  41. 		var el1 = document.getElementById('txtRow'+i);//Row's Income field
  42. 		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
  43. 		var el3 = document.getElementById('txtRowe'+i);//Row's Tax cell
  44. 		if(!el1 || !el2 || !el3) continue;
  45. 		var txt = el1.value;
  46. 		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  47. 		var tax = Number(txt) * Number(el2[el2.selectedIndex].value)/100;
  48. 		el3.innerHTML = tax.toFixed(2);
  49. 		s1 += Number(txt);
  50. 		s2 += tax;
  51. 	}
  52. 	var t1 = document.getElementById('total');
  53. 	var t2 = document.getElementById('taxtotal');
  54. 	if(t1){ t1.value = s1.toFixed(2); }
  55. 	if(t2){ t2.value = s2.toFixed(2); }
  56. }
  57.  
  58. onload = function(){
  59. 	addrow();
  60. }
Airshow
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

Re: help with dynamic table options

 
0
  #7
Sep 29th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

Re: help with dynamic table options

 
0
  #8
Sep 29th, 2009
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  2.  
  3. <head> 
  4.   <title></title>function addrow(){
  5. 	var tbl = document.getElementById('sheet');
  6. 	var iteration = tbl.rows.length;
  7. 	var row=tbl.insertRow(iteration);
  8.  
  9. 	var cellLeft = row.insertCell(0);
  10. 	var textNode = document.createTextNode(iteration);
  11. 	cellLeft.appendChild(textNode);
  12.  
  13. 	var cellRight = row.insertCell(1);
  14. 	var el = document.createElement('input');
  15. 	el.type = 'text';
  16. 	el.name = 'txtRow'+iteration;
  17. 	el.id = 'txtRow'+iteration;
  18. 	el.size = 40;
  19. 	el.value = '0';
  20. 	el.onblur = sum;
  21. 	cellRight.appendChild(el);
  22.  
  23. 	var cellRight1 = row.insertCell(2);
  24. 	cellRight1.id = 'txtRowe'+iteration;
  25.  
  26. 	var cellRightsel = row.insertCell(3);
  27. 	var sel = document.createElement('select');
  28. 	sel.name = 'selRow' + iteration;
  29. 	sel.id = 'selRow' + iteration;
  30. 	sel.onchange = sum;
  31. 	sel.options[0] = new Option('10%', '10');
  32. 	sel.options[1] = new Option('20%', '20');
  33. 	sel.options[2] = new Option('30%', '30');
  34. 	cellRightsel.appendChild(sel);
  35. 	sum();
  36. }
  37.  
  38. function sum(){
  39. 	var s1 = 0;
  40. 	var s2 = 0;
  41. 	var tbl=document.getElementById('sheet');
  42. 	var iteration=tbl.rows.length-1;
  43. 	for(var i=1; i<=iteration; i++){//loop through table rows
  44. 		var el1 = document.getElementById('txtRow'+i);//Row's Income field
  45. 		var el2 = document.getElementById('selRow'+i);//Row's percentage menu
  46. 		var el3 = document.getElementById('txtRowe'+i);//Row's Tax cell
  47. 		if(!el1 || !el2 || !el3) continue;
  48. 		var txt = el1.value;
  49. 		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  50. 		var tax = Number(txt) * Number(el2[el2.selectedIndex].value)/100;
  51. 		el3.innerHTML = tax.toFixed(2);
  52. 		s1 += Number(txt);
  53. 		s2 += tax;
  54. 	}
  55. 	var t1 = document.getElementById('total');
  56. 	var t2 = document.getElementById('taxtotal');
  57. 	if(t1){ t1.value = s1.toFixed(2); }
  58. 	if(t2){ t2.value = s2.toFixed(2); }
  59. }
  60.  
  61. onload = function(){
  62. 	addrow();
  63. }
  64. </script>
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72. </head> 
  73.  
  74. <body> 
  75. <form action="miro.html" name="eval_edit" method="post" format="html"> 
  76. <table align="center" width = "75%"> 
  77. <tr> 
  78. <td align = "center"> 
  79. click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! 
  80. </td> 
  81. </tr> 
  82. <tr> 
  83. <td align = "center"> 
  84. <!--- very imporant to give the table an id ---> 
  85. <!--- otherwise it won't know where to edit ---> 
  86. <table border="1" id="mySampleTable"> 
  87. <tr> 
  88. <td> 
  89. Lesson 
  90. </td> 
  91. <td> 
  92. Title 
  93. </td> 
  94. <td> 
  95. Instructor 
  96. </td> 
  97. </tr> 
  98.  
  99. <tr> 
  100. <td> 
  101. 1 
  102. </td> 
  103. <td><input sumMe="1" type="text" name="txtRow1" id="txtRow1" size="40" /></td><tr>
  104. <tr>
  105. <td><input sumMe1="1" type="text" name="txtRowe1" id="txtRowe1" size="40" /> </td> 
  106. <td> 
  107. <select name="selRow0"> 
  108. <option value="10">10%</option> 
  109. <option value="20">20%</option> 
  110. <option value="30">30%</option> 
  111. </select> 
  112. </td> 
  113. </tr> 
  114. </table> 
  115.  <input name="total" type="text"/> 
  116. <!--- our buttons call our javascript functions when clicked ---> 
  117. <input type="button" value="Add" onclick="addRow();" /> 
  118. <input type="button" value="Remove" onclick="removeRow();" /> 
  119. <input type="button" value="SUM" onClick="sum()"/> 
  120. <input type="button" value="SUM1" onClick="sum1()"/> 
  121. <input type="submit" value="Submit" /> 
  122. </td> <td><input name="taxtotal" type="text"/></td>
  123. </tr> 
  124. </table> 
  125. </form> 
  126.  
  127. </body> 
  128.  
  129. </html>
  130.  
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 858
Reputation: Airshow is on a distinguished road 
Solved Threads: 122
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: help with dynamic table options

 
0
  #9
Sep 29th, 2009
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
Last edited by Airshow; Sep 29th, 2009 at 9:02 am.
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 24
Reputation: azegurb is an unknown quantity at this point 
Solved Threads: 0
azegurb azegurb is offline Offline
Light Poster

Re: help with dynamic table options

 
0
  #10
Sep 29th, 2009
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
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC