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

addRowToTable

P: 5
I am trying to create a dynamic form on my webpage. What I want to do is repeat this process multiple times on the same page. I know I have to have unique id's but I am not for sure how to set them.

Expand|Select|Wrap|Line Numbers
  1. // JavaScript Document 
  2. function addRowToTable(){
  3.   var tbl = document.getElementById('Division');
  4.   var lastRow = tbl.rows.length;
  5.   // if there's no header row in the table, then iteration = lastRow + 1
  6.   var iteration = lastRow;
  7. //  var iteration = lastRow + 1;
  8.   var row = tbl.insertRow(lastRow);
  9.  
  10.   //  cell 0
  11.   var cell0 = row.insertCell(0);
  12.   var el = document.createElement('input');
  13.   el.type = 'text';
  14.   el.NAME = 'Resource[]';
  15.   el.size = 30;
  16.   cell0.appendChild(el);
  17.  
  18.  
  19.   //cell 1
  20.   var cell1 = row.insertCell(1);
  21.   var el = document.createElement("select");
  22.   cell1.innerHTML 
  23.     + '<option value="0">Avaliable</option>'
  24.     + '<option value="1">Busy</option>'
  25.  
  26.   //cell 2
  27.   var cell2 = row.insertCell(2);
  28.   var el = document.createElement('input');
  29.   el.type = 'text';
  30.   el.NAME = 'Comment[]';
  31.   el.size = 25;
  32.   cell2.appendChild(el);
  33.  
  34. }
May 2 '12 #1
Share this Question
Share on Google+
4 Replies


Expert 100+
P: 164
Unless you plan to target those new elements, you do not need to apply IDs. If I have misunderstood your needs, please define them more explicitly.
May 3 '12 #2

P: 5
Basically I want to have multiple tables each with their own add button(which adds a row with the 2 text boxes and drop down) that only adds to that specific table.
May 3 '12 #3

Expert 100+
P: 164
In that case, you need to add an argument to your function defintion.

So, instead of this:

Expand|Select|Wrap|Line Numbers
  1. function addRowToTable(){
  2.   var tbl = document.getElementById('Division');
  3.   ... rest of the function ...
  4. }
You should use this:


Expand|Select|Wrap|Line Numbers
  1. function addRowToTable(whichTable){
  2.   var tbl = document.getElementById(whichTable);
  3.   ... rest of the function ...
  4. }

And the button should have the the ID of the target table in the event. So....

Expand|Select|Wrap|Line Numbers
  1. <button type="button" onclick="addRowToTable('table-1')">Add row</button>
  2.  
  3. <button type="button" onclick="addRowToTable('table-2')">Add row</button>
  4.  
Make sense?


Expand|Select|Wrap|Line Numbers
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function addRowToTable(whichTable){
  6.   var tbl = document.getElementById(whichTable);
  7.   var lastRow = tbl.rows.length;
  8.   // if there's no header row in the table, then iteration = lastRow + 1
  9.   var iteration = lastRow;
  10. //  var iteration = lastRow + 1;
  11.   var row = tbl.insertRow(lastRow);
  12.  
  13.   //  cell 0
  14.   var cell0 = row.insertCell(0);
  15.   var el = document.createElement('input');
  16.   el.type = 'text';
  17.   el.NAME = 'Resource[]';
  18.   el.size = 30;
  19.   cell0.appendChild(el);
  20.  
  21.  
  22.   //cell 1
  23.   var cell1 = row.insertCell(1);
  24.   var el = document.createElement("select");
  25.   cell1.innerHTML
  26.     + '<option value="0">Avaliable</option>'
  27.     + '<option value="1">Busy</option>'
  28.  
  29.   //cell 2
  30.   var cell2 = row.insertCell(2);
  31.   var el = document.createElement('input');
  32.   el.type = 'text';
  33.   el.NAME = 'Comment[]';
  34.   el.size = 25;
  35.   cell2.appendChild(el);
  36.  
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <table id="Division1">
  42.     <tr><td>Thing1</td><td>Thing2</td></tr>
  43.     <tr><td><button type="button" onclick="addRowToTable('Division1')">Add Row</button></td><td></td></tr>
  44. </table>
  45.  
  46. <table id="Division2">
  47.     <tr><td>Thing1</td><td>Thing2</td></tr>
  48.     <tr><td><button type="button" onclick="addRowToTable('Division2')">Add Row</button></td><td></td></tr>
  49. </table></body>
  50. </html>
May 4 '12 #4

P: 5
Awesome I will give it a try! Thank you for helping the newbie!
May 4 '12 #5

Post your reply

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