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

Creating Dynamic Tables with JavaScript

Newbie
  
Join Date: Jun 2008
Posts: 1
#1: Jun 5 '08
Hello,

I'm new to Javascript, but I'm trying to create html tables based off a checkbox action. Is it possible to do this on the same page?

I've noticed that document.write() will create the tables in a new request which isn't what I'm looking for. I attempted to do this via DOM but I can't get the tables to show up in the page.
Expand|Select|Wrap|Line Numbers
  1.                 function checkboxOnDemand(obj, parentId, childId, topHeader)
  2.     {
  3.         var checkbox = eval("document.checkForm." + obj.name);
  4.  
  5.         if(checkbox.checked == true)
  6.         {
  7.             alert("Adding table");
  8.             addParentTable(parentId, childId, topHeader);
  9.         }
  10.         else
  11.         {
  12.             alert("Removing table");
  13.             removeElement(parentId, childId);
  14.         }
  15.     }
  16.     function addParentTable(parentId, childId, topHeader)
  17.     {
  18.         // get parent element (div)
  19.         var element = document.getElementById(parentId);
  20.  
  21.         if(element != null)
  22.         {
  23.             // create parent table 
  24.             var table = document.createElement('table');
  25.             table.setAttribute('name', childId);
  26.  
  27.             // add style to table
  28.             var cssString = 'border:1px solid #000;width:600;left:800';
  29.             //table.style.cssText = cssString;
  30.             table.setAttribute('style',cssString);
  31.  
  32.             // add table to parent
  33.             element.appendChild(table);
  34.  
  35.             // create header row 1
  36.             var tr1 = document.createElement('tr');
  37.             var td1 = document.createElement('td');
  38.  
  39.             table.appendChild(tr1);
  40.             tr1.appendChild(td1);
  41.  
  42.             // add style to table data
  43.             var cssString1 = 'font-weight:bold;height:10';
  44.             //td.style.cssText = cssString1;
  45.             td1.setAttribute('style',cssString1);
  46.  
  47.             //var text1 = document.createTextNode(topHeader);
  48.             //td.appendChild(text1);
  49.  
  50.             for(var y = 1;y <= rowHeader.length;y++) 
  51.             {
  52.                 var tr = document.createElement('tr');
  53.                 var td = document.createElement('td');
  54.  
  55.                 // add table elements
  56.                 table.appendChild(tr);
  57.                 tr.appendChild(td);
  58.  
  59.                 // add style to table data
  60.                 var cssString = 'width:300';
  61.                 //td.style.cssText = cssString;
  62.                 td.setAttribute('style', cssString);
  63.  
  64.                 var div = document.createElement('div');
  65.                 div.setAttribute('class', 'labelHeader');
  66.  
  67.                 var text2 = document.createTextNode(rowHeader[y-1]);
  68.                 div.appendChild(text2);
  69.  
  70.                 var td2 = document.createElement('td');
  71.                 var cssString2 = 'width:300';
  72.                 //td2.style.cssText = cssString2;
  73.                 td2.setAttribute('style', cssString2);
  74.                 tr.appendChild(td2);
  75.  
  76.                 var textBox = document.createElement('input');
  77.  
  78.                 if(y == 3)
  79.                 {
  80.                     textBox.setAttribute('type', 'file');
  81.  
  82.                     // add "add more files" button here
  83.                     var fileButton = document.createElement('input');
  84.                     fileButton.setAttribute('type', 'button');
  85.                     fileButton.setAttribute('href', '#');
  86.                     fileButton.setAttribute('onClick', '\addAdditionalTable();\"');
  87.                 }
  88.                 else
  89.                 {
  90.                     textBox.setAttribute('type', 'text');
  91.                 }
  92.  
  93.                 textBox.setAttribute('size', 30);
  94.                 textBox.setAttribute('name', ('element' + y));
  95.                 td2.appendChild(textBox);            
  96.             }
  97.  
  98.             /*var br1 = document.createElement('br');
  99.             var br2 = document.createElement('br');
  100.             element.appendChild(br1);
  101.             element.appendChild(br2);*/
  102.         }
  103.     }
  104.  
  105. <!-- JSP code that creates the checkboxes -->
  106. <table height=100px width=300px>
  107. <tr>
  108. <td style="width:150"> <div class="labelHeader">Field Name:</div>
  109. </td>
  110. <td class="scroll" style="border:1px solid #000;width:200px; height:150px; overflow: auto">
  111. <% 
  112. for(int x=1;x<=headers.length;x++) 
  113. {
  114. out.println("<input type=\"checkbox\" onClick=\"checkboxOnDemand(this, \'tableSpace\', \'" + tables[x-1] 
  115. + "\', \'" + headers[x-1] + "\');\" name=\"checkBox" + x + "\" />" + headers[x-1] + "<br>");
  116. }%>    
  117. </td>
  118. </tr>
  119. </table>

vikas251074's Avatar
Familiar Sight
  
Join Date: Dec 2007
Location: Patna
Posts: 198
#2: Jun 6 '08

re: Creating Dynamic Tables with JavaScript

So this is your code
OK

Expand|Select|Wrap|Line Numbers
  1. function checkboxOnDemand(obj, parentId, childId, topHeader)
  2. {
  3. var checkbox = eval("document.checkForm." + obj.name);
  4.  
  5. if(checkbox.checked == true)
  6. {
  7. alert("Adding table");
  8. addParentTable(parentId, childId, topHeader);
  9. }
  10. else
  11. {
  12. alert("Removing table");
  13. removeElement(parentId, childId);
  14. }
  15. }
  16. function addParentTable(parentId, childId, topHeader)
  17. {
  18. // get parent element (div)
  19. var element = document.getElementById(parentId);
  20.  
  21. if(element != null)
  22. {
  23. // create parent table 
  24. var table = document.createElement('table');
  25. table.setAttribute('name', childId);
  26.  
  27. // add style to table
  28. var cssString = 'border:1px solid #000;width:600;left:800';
  29. //table.style.cssText = cssString;
  30. table.setAttribute('style',cssString);
  31.  
  32. // add table to parent
  33. element.appendChild(table);
  34.  
  35. // create header row 1
  36. var tr1 = document.createElement('tr');
  37. var td1 = document.createElement('td');
  38.  
  39. table.appendChild(tr1);
  40. tr1.appendChild(td1);
  41.  
  42. // add style to table data
  43. var cssString1 = 'font-weight:bold;height:10';
  44. //td.style.cssText = cssString1;
  45. td1.setAttribute('style',cssString1);
  46.  
  47. //var text1 = document.createTextNode(topHeader);
  48. //td.appendChild(text1);
  49.  
  50. for(var y = 1;y <= rowHeader.length;y++) 
  51. {
  52. var tr = document.createElement('tr');
  53. var td = document.createElement('td');
  54.  
  55. // add table elements
  56. table.appendChild(tr);
  57. tr.appendChild(td);
  58.  
  59. // add style to table data
  60. var cssString = 'width:300';
  61. //td.style.cssText = cssString;
  62. td.setAttribute('style', cssString);
  63.  
  64. var div = document.createElement('div');
  65. div.setAttribute('class', 'labelHeader');
  66.  
  67. var text2 = document.createTextNode(rowHeader[y-1]);
  68. div.appendChild(text2);
  69.  
  70. var td2 = document.createElement('td');
  71. var cssString2 = 'width:300';
  72. //td2.style.cssText = cssString2;
  73. td2.setAttribute('style', cssString2);
  74. tr.appendChild(td2);
  75.  
  76. var textBox = document.createElement('input');
  77.  
  78. if(y == 3)
  79. {
  80. textBox.setAttribute('type', 'file');
  81.  
  82. // add "add more files" button here
  83. var fileButton = document.createElement('input');
  84. fileButton.setAttribute('type', 'button');
  85. fileButton.setAttribute('href', '#');
  86. fileButton.setAttribute('onClick', '\addAdditionalTable();\"');
  87. }
  88. else
  89. {
  90. textBox.setAttribute('type', 'text');
  91. }
  92.  
  93. textBox.setAttribute('size', 30);
  94. textBox.setAttribute('name', ('element' + y));
  95. td2.appendChild(textBox); 
  96. }
  97.  
  98. /*var br1 = document.createElement('br');
  99. var br2 = document.createElement('br');
  100. element.appendChild(br1);
  101. element.appendChild(br2);*/
  102. }
  103. }
  104.  
  105. <!-- JSP code that creates the checkboxes -->
  106. <table height=100px width=300px>
  107. <tr>
  108. <td style="width:150"> <div class="labelHeader">Field Name:</div>
  109. </td>
  110. <td class="scroll" style="border:1px solid #000;width:200px; height:150px; overflow: auto">
  111. <% 
  112. for(int x=1;x<=headers.length;x++) 
  113. {
  114. out.println("<input type=\"checkbox\" onClick=\"checkboxOnDemand(this, \'tableSpace\', \'" + tables[x-1] 
  115. + "\', \'" + headers[x-1] + "\');\" name=\"checkBox" + x + "\" />" + headers[x-1] + "<br>");
  116. }%> 
  117. </td>
  118. </tr>
  119. </table> 
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Jun 6 '08

re: Creating Dynamic Tables with JavaScript

You need to add it to a tbody in IE (I assume the problem is in IE).

See Browser Quirk: Dynamically appended table does not appear on page.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/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,510 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