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

adding the rows in a table

P: 2
I have this piece of code, wherin I would like to add the "amount" col to SubTotal each time a row is added and delete the "amount" from SubTotal each time a row is deleted.
Any help?

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5.  
  6.  
  7. function addRow(tableId, cells){
  8.          var tableElem = document.getElementById(tableId);
  9.          var newRow = tableElem.insertRow(tableElem.rows.length);
  10.          var newCell;
  11.         for (var i = 0; i < cells.length; i++) {
  12.                 newCell = newRow.insertCell(newRow.cells.length);
  13.                 newCell.innerHTML = cells[i];
  14.         }
  15.         return newRow;
  16. }
  17.  
  18.  
  19. function deleteRow(tableId, rowNumber){
  20.         var tableElem1 = document.getElementById(tableId);
  21.         if (rowNumber > 0 && rowNumber < tableElem1.rows.length) {
  22.                 tableElem1.deleteRow(rowNumber);
  23.          } else {
  24.           alert("Failed");
  25.          }
  26. }
  27.  
  28. </script>
  29. </head>
  30.  
  31.  
  32. <body>
  33. <table id="tblPeople" border="1">
  34. <tr>
  35.  <th>Hour</th>
  36.  <th>Rate</th>
  37.  <th>Amount </th>
  38. </tr>
  39. </table>
  40. <hr>
  41. <form name="formName">
  42.  Hour: <input type="text" name="Hour"><br>
  43.  Rate: <input type="text" name="Rate"><br>
  44.   <input type="hidden" name="amount" id="amount"><br>
  45.   Subtotal:<input type="text" name="subtotal" id="subtotal"><br>
  46.  <input type="button" value="Add Name"
  47.   onclick="addRow('tblPeople',
  48.    [this.form.Hour.value, this.form.Rate.value, this.form.Hour.value  * this.form.Rate.value ] )" ;>
  49.  <hr>
  50.  Remove Row: <input type="text" size="1" name="RowNum">
  51.  <input type="button" value="Delete Row"
  52.   onclick="deleteRow('tblPeople', this.form.RowNum.value)">
  53. </form>
  54. </body>
  55. </html>
Oct 23 '11 #1
Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you would probably have to re-do the (sub)total calculation each time a row is added or removed.
Oct 23 '11 #2

P: 2
THANKS Dormilich,
What I am trying to ask is how do I access "amount" from Java Script and fairly print SubTotal(used document.write, but it seems if you print html document.print does not work).
Can I have something as a global variable, I am fairly new to HTML and JS, this is my first try :-)
Oct 23 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
neither will document.write() work (because of how it works internally) nor is a global variable useful (all the required data are already in the table.

it’s too late now so I will look into it tomorrow.
Oct 23 '11 #4

RamananKalirajan
100+
P: 607
Hi Sayantan,
You can achieve it. Whenever you are adding a row or deleting a row make a call to another function. From the first row you can add up the third column value and sum it and display it on the subtotal. The following is a sample I write here (Not checked)

Expand|Select|Wrap|Line Numbers
  1. function doSubTotal(){
  2.    var tblObj = document.getElementById('tblPeople');
  3.    var rowLen = tblObj.rows.length;
  4.    var subTotal = 0;
  5.    for(var i=1;i<tblObj.rows.length;i++){
  6.       var rowObj = tblObj.rows[i];
  7.       subTotal+=parseInt(tblObj.rows[i].cells[rowObj.cells.length - 1].childNodes[0].data);
  8.    }
  9.    document.getElementById('subtotal').value=subTotal;
  10. }
Please let me know if you have any doubts

Thanks and Regards
Ramanan Kalirajan
Oct 24 '11 #5

Post your reply

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