By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,597 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

JavaScript dynamic table SUM problem

P: 32
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


Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2.  
  3. <head>
  4.   <title></title>
  5. <script type="text/javascript">
  6. /*<![CDATA[*/
  7.  
  8. function addRow()
  9. {
  10. // grab the element, i.e. the table your editing, in this we're calling it
  11. // 'mySampleTable' and it is reffered to in the table further down on the page
  12. // with a unique of id of you guessed it, 'mySampleTable'
  13. var tbl = document.getElementById('mySampleTable');
  14. // grab how many rows are in the table
  15. var lastRow = tbl.rows.length;
  16.  
  17. // if there's no header row in the table (there should be, code at least one
  18. //manually!), then iteration = lastRow + 1
  19. var iteration = lastRow;
  20. // creates a new row
  21. var row = tbl.insertRow(lastRow);
  22.  
  23. // left cell
  24. // insert a cell
  25. var cellLeft = row.insertCell(0);
  26. // here we're just using numbering the cell, like anything else you don't
  27. // have to use this, but i've kinda noticed users tend to like them
  28. var textNode = document.createTextNode(iteration);
  29. // takes what we did (create the plain text number) and appends it the cell
  30. // we created in the row we created. NEAT!
  31. cellLeft.appendChild(textNode);
  32.  
  33. // right cell
  34. // another cell!
  35. var cellRight = row.insertCell(1);
  36. // creating an element this time, specifically an input
  37. var el = document.createElement('input');
  38. // a data type of text
  39. el.type = 'text';
  40. // the name of the element txtRow, and because this is dynamic we also
  41. // append the row number to it, so for example if this is the eigth row
  42. // being created the text box will have the name of txtRow8. super fantastic.
  43. el.name = 'txtRow' + iteration;
  44. // the exact same thing with a unique id
  45. el.id = 'txtRow' + iteration;
  46. // set it to size of 40. setting sizes is good.
  47. el.size = 40;
  48.  
  49. // same thing as earlier, append our element to our freshly and clean cell
  50. cellRight.appendChild(el);
  51.  
  52. // select cell
  53. // our last cell!
  54. var cellRightSel = row.insertCell(2);
  55. // create another element, this time a select box
  56. var sel = document.createElement('select');
  57. // name it, once again with an iteration (selRow8 using the example above)
  58. sel.name = 'selRow' + iteration;
  59. // crates options in an array
  60. // the Option() function takes the first parameter of what is being displayed
  61. // from within the drop down, and the second parameter of the value it is carrying over
  62. sel.options[0] = new Option('text zero', 'value0');
  63. sel.options[1] = new Option('text one', 'value1');
  64. sel.options[2] = new Option('text two', 'value2');
  65. // append our new element containing new options to our new cell
  66. cellRightSel.appendChild(sel);
  67. }
  68.  
  69. function removeRow()
  70. {
  71. // grab the element again!
  72. var tbl = document.getElementById('mySampleTable');
  73. // grab the length!
  74. var lastRow = tbl.rows.length;
  75. // delete the last row if there is more than one row!
  76. if (lastRow > 2) tbl.deleteRow(lastRow - 1);
  77. }
  78. /*]]>*/
  79. </script>
  80.  
  81. <script type="text/javascript">
  82.  
  83. function sum(){
  84.  }
  85.  
  86. </script>
  87. </head>
  88.  
  89. <body>
  90. <form action="miro.html" name="eval_edit" method="post" format="html">
  91. <table align="center" width = "75%">
  92. <tr>
  93. <td align = "center">
  94. click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
  95. </td>
  96. </tr>
  97. <tr>
  98. <td align = "center">
  99. <!--- very imporant to give the table an id --->
  100. <!--- otherwise it won't know where to edit --->
  101. <table border="1" id="mySampleTable">
  102. <tr>
  103. <td>
  104. Lesson
  105. </td>
  106. <td>
  107. Title
  108. </td>
  109. <td>
  110. Instructor
  111. </td>
  112. </tr>
  113. <!--- i create the initial row by hand, there are a lot of --->
  114. <!--- different ways to do this depending on what parsing --->
  115. <!--- language you use, i found this was easiest for the --->
  116. <!--- snippet, but experiment, do your thing mang. --->
  117. <!--- this matches the same specs we laid out in the javascript --->
  118. <tr>
  119. <td>
  120. 1
  121. </td>
  122. <td>
  123. <input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
  124. <td>
  125. <select name="selRow0">
  126. <option value="value0">text zero</option>
  127. <option value="value1">text one</option>
  128. <option value="value2">text two</option>
  129. </select>
  130. </td>
  131. </tr>
  132. </table>
  133.  <input name="total" />
  134. <!--- our buttons call our javascript functions when clicked --->
  135. <input type="button" value="Add" onclick="addRow();" />
  136. <input type="button" value="Remove" onclick="removeRow();" />
  137. <input type="button" value="SUM" onClick="sum()"/>
  138. <input type="submit" value="Submit" />
  139. </td>
  140. </tr>
  141. </table>
  142. </form>
  143.  
  144. </body>
  145.  
  146. </html>
Sep 20 '09 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
@azegurb
simply loop over the rows using the first cellís node value.

this thread also deals with summations in a table, it should provide some ideas.
Sep 20 '09 #2

P: 32
Pls if possible help me to write function in my example
if possible help me
thanks
Sep 20 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
sure. this follow-up thread should give you some more insights.
Sep 20 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.