473,581 Members | 6,653 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

JavaScript dynamic table SUM problem

32 New Member
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">
  3. <head>
  4.   <title></title>
  5. <script type="text/javascript">
  6. /*<![CDATA[*/
  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;
  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);
  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);
  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;
  49. // same thing as earlier, append our element to our freshly and clean cell
  50. cellRight.appendChild(el);
  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. }
  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>
  81. <script type="text/javascript">
  83. function sum(){
  84.  }
  86. </script>
  87. </head>
  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>
  144. </body>
  146. </html>
Sep 20 '09 #1
3 4202
8,658 Recognized Expert Moderator Expert
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
32 New Member
Pls if possible help me to write function in my example
if possible help me
Sep 20 '09 #3
8,658 Recognized Expert Moderator Expert
sure. this follow-up thread should give you some more insights.
Sep 20 '09 #4

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

Similar topics

by: Andy | last post by:
Hi, I am complete JavaScript novice and would really appreciate some help with this code: ===================================================================== <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!--#include file="Connections/ssdb.asp" -->
by: binnyva | last post by:
Hello Everyone, I have just compleated a JavaScript tutorial and publishing the draft(or the beta version, as I like to call it) for review. This is not open to public yet. The Tutorial is avaliable at... http://www.geocities.com/binnyva/code/javascript/advanced_tutorial/ If any of you could spare the time, please have a look at my...
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their code was littered with document.all and eval, for example, and I wanted to create a practical list of best practices that they could easily put to...
by: Jorge Ponte | last post by:
hi I have a Web User Control (ascx) - lets call it "My_WUC" - in a Web form. In that WUC I want have a textbox and a button. I want to click on the button and open a popup (I use javascript for that), the popup window will have also a text box and a button. when the User click on the button the value on the textbox will be send back to the...
by: serge | last post by:
How can I run a single SP by asking multiple sales question either by using the logical operator AND for all the questions; or using the logical operator OR for all the questions. So it's always either AND or OR but never mixed together. We can use Northwind database for my question, it is very similar to the structure of the problem on the...
by: Satish.Talyan | last post by:
hi, i want to create a dynamic tree hierarchy in javascript.there are two parts in tree, group & user.when we click on group then users come under that's tree category will be opened.problem is that i am not able to arrange three things simultaneously,group,users & there functionality simultaneously.dynamic means group & users come from...
by: julian.tklim | last post by:
Hi, I need to build an editable Datagrid with add & delete buttons on each row using javascript. DataGrid need not be pre-populated with values. To make the thing complicated, one of the column need to be a date picker field. I know things will be easier with ASPX datagrid.
by: Tom Cole | last post by:
I'm working on a small Ajax request library to simplify some tasks that I will be taking on shortly. For the most part everything works fine, however I seem to have some issues when running two requests at the same time. The first one stops execution as the second continues. If I place either an alert between the two requests or run the second...
by: tokcy | last post by:
hi everyone, i am creating dynamic row in a table using javascript its working fine and now i want to create more than 1 table using javascript which is dynamic its also working fine but when i am taking the value of each table individually thats i am not able to get any value. if i get the value of table then its not taking properly. let...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.