Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

dynamic table sum of the options problem

Newbie
  
Join Date: Sep 2009
Posts: 6
#1: Sep 26 '09
Hello, I have one question again
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 tax
for ex: in column1 i added 300 and into 2-nd column i Chose 10%

i would like when i chose from drop down box 10% Let in the 2-nd column appear 10% of the value which i addee first column
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% Let in 2-nd column appear 100
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



Expand|Select|Wrap|Line Numbers
  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>
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Sep 28 '09

re: dynamic table sum of the options problem

Quote:

Originally Posted by azegurb View Post

i would like when i chose from drop down box 10% Let in the 2-nd column appear 10% of the value which i addee first column

Use an onchange on the select element to make this change. It might be an idea to make the value of the options, the amount that you have to multiply or divide by, e.g. 0.1 or 10.

The summing is trivial if you've already summed the 1st column.
Newbie
  
Join Date: Sep 2009
Posts: 6
#3: Sep 28 '09

re: dynamic table sum of the options problem

i did but nothink i got
if i put code here can you help me
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Sep 28 '09

re: dynamic table sum of the options problem

Yes, post your attempt and I can suggest improvements/changes.
Newbie
  
Join Date: Sep 2009
Posts: 6
#5: Sep 28 '09

re: dynamic table sum of the options problem

just i worked around it but table head column goes to the right when clicked add button
and one thing i would like to learn when updated left column according to it right column let automatically changes
thanks very much



Expand|Select|Wrap|Line Numbers
  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.  
  14.  
  15. var cellRight=row.insertCell(1);
  16. var el=document.createElement('input');
  17. el.type='text';
  18. el.name='txtRow'+iteration;
  19. el.size=40;
  20. el.setAttribute('sumMe',"1");
  21. el.onBlur=sum;
  22. cellRight.appendChild(el);
  23.  
  24. var cellRight1=row.insertCell(2);
  25. var el1=document.createElement('input');
  26. el1.type='text';
  27. el1.name='txtRowe'+iteration;
  28. el1.size=40;
  29. el1.setAttribute('sumMe1',"1");
  30. el1.onBlur=sum1;
  31. cellRight.appendChild(el1);
  32.  
  33.  
  34.  
  35.  
  36. var cellRightsel=row.insertCell(3);
  37. var sel=document.createElement('select');
  38. sel.name='selRow'+iteration;
  39. sel.options[0]=new Option('10%','10');
  40. sel.options[1]=new Option('20%','20');
  41. sel.options[2]=new Option('30%','30');
  42. sel.onchange=function(){ Percent(this); }
  43. cellRightsel.appendChild(sel);
  44.  
  45. }
  46. </script>
  47. <script type="text/javascript"> 
  48. function sum(){
  49.     var form = document.getElementById('eval_edit');
  50.     if(!form) return;
  51.     var fields = form.getElementsByTagName('input');
  52.     var s = 0;//sum value
  53.     for(var i=0; i<fields.length; i++){
  54.         if( fields[i].getAttribute('sumMe') != "1" ) continue;//reject any field not carring the "sumMe" attribute
  55.         var txt = fields[i].value;
  56.         if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  57.         s += Number(txt);
  58.     }
  59.     if(form['total']){ form['total'].value = s; }
  60. }
  61.  
  62. onload = function(){
  63.     sum();
  64. }
  65.  
  66.  
  67. </script> 
  68.  
  69. <script type="text/javascript"> 
  70. function sum1(){
  71.     var form = document.getElementById('eval_edit');
  72.     if(!form) return;
  73.  
  74.     var fields = form.getElementsByTagName('input');
  75.  
  76.  
  77.     var s = 0;//sum value
  78.     for(var i=0; i<fields.length; i++){
  79.         if( fields[i].getAttribute('sumMe1') != "1" ) continue;//reject any field not carring the "sumMe" attribute
  80.         var txt = fields[i].value;
  81.         if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
  82.         s += Number(txt);
  83.     }
  84.     if(form['taxtotal']){ form['taxtotal'].value = s; }
  85. }
  86.  
  87. onload = function(){
  88.     sum1();
  89. }
  90.  
  91.  
  92.  
  93.  
  94. </script> 
  95.  
  96. <script  type="text/javascript"> 
  97. /*<![CDATA[*/
  98.  
  99. function Percent(obj){
  100.  var row=obj;
  101.  while (row.parentNode&&row.nodeName!='TR'){
  102.   row=row.parentNode;
  103.  }
  104.  var ips=row.getElementsByTagName('INPUT')
  105.  ips[0].value=ips[0].value.replace(/[^0-9.]/g,'');
  106.  ips[1].value='';
  107.  if (ips[0].value){
  108.   ips[1].value=ips[0].value/100*obj.value;
  109.  }
  110. }
  111.  
  112. /*]]>*/
  113. </script></head>
  114. <body>
  115. <form name="eval_edit" method="POST">
  116. <table align="center" width="75%">
  117. <tr>
  118. <td align="center">Balance sheet</td></tr>
  119. <tr><td align="center">
  120. <table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
  121. <tr><td>1</td>
  122. <td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe1="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
  123. <td><select name="selRow0" onchange="Percent(this); ">
  124. <option value="10">10%</option>
  125. <option value="20">20%</option>
  126. <option value="30">30%</option></select></td></tr></table>
  127. INCOME SUM<input name="total" type="text"/>
  128. <input type="button" value="Add" onclick="addrow()" />
  129. <input type="button" value="Remove" onclick="removeRow()" />
  130. <input type="button" value="SUM" onClick="sum()"/>
  131. <input type="button" value="SUM1" onClick="sum1()"/>
  132. <input type="submit" value="Submit" /> Tax SUM with desirable percent for ex: 20%<input name="taxtotal" type="text"/>
  133. </td>
  134. </tr>
  135. </table>
  136. </form>
  137.  
  138. </body>
  139.  
  140. </html>
  141.  
  142.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Oct 1 '09

re: dynamic table sum of the options problem

On line 31, you're appending to cellRight instead of cellRight1.

Where you have el..onBlur, it should be onblur (lower-case "b").
Newbie
  
Join Date: Sep 2009
Posts: 6
#7: Oct 1 '09

re: dynamic table sum of the options problem

Thank you i will try
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved