469,909 Members | 1,562 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

Dynamically Adding Table Rows that contain IFrames with unique names.

I'm not much of a HTML or Javascript programmer but have a little experience just hacking away at it.

I am creating a HTML application and would like to be able to add or remove rows of a table. The row that gets added will need to contain 2 columns, 1 which contains an IFRAME, and the other will contain a Javascript Menu which will be used to select the content displayed in the IFRAME.

The purpose of the tool is to be used as a video monitor bank. The user will be able to configure the first bank and set which feed they want to display, then if they want add a second bank and select a different feed to display and so on. I have a site working with one such bank but want to add the functionality of being able to dynamically add to it.

The information I have read or seen on this is either to do with dynamically adding text boxes or adding content that is the same as the previous row. I would need each new row to have unique ID's for the IFRAMEs so that I can have different content in them.

I should also point out that everything must rely on client side scripting because it is a local application and will not be hosted on a server.

Any help or points in the right direction would be awsome.
Oct 22 '07 #1
5 2909
16,027 Expert Mod 8TB
Welcome to TSDN!

What code do you have for the first row?

To add a row, create a row (tr element), two cells (td elements) and use appendChild, e.g.
Expand|Select|Wrap|Line Numbers
  1. //get table
  2. var table = document.getElementById("tableid");
  3. // create row
  4. var tr = document.createElement("tr");
  5. // create cell
  6. var td = document.createElement("td");
  7. // create iframe using document.createElement("iframe");
  8. // append to td
  9. td.appendChild(iframe);
  10. // append to row
  11. tr.appendChild(td);
  12. table.appendChild(tr);
To use a unique ID for each row, you could use the row number or create a variable which keeps the count.
Oct 23 '07 #2
Thanks for your help. Perhaps I am in over my head but I figure I will post what I have here and get your suggestions. This is what I am working with it displays best in Firefox and as this will only be used locally that will suffice for now.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type"
  5.  content="text/html; charset=ISO-8859-1">
  6.   <title>DMP Codec Web Monitor</title>
  7.   <meta name="author" content="Liquidtouch">
  8.   <script type="text/javascript" language="JavaScript1.2"
  9.  src="stm31.js"></script>
  10. </head>
  11. <body style="color: white; background-color: black;"
  12.  alink="#0000fd" link="white" vlink="white">
  13. <table
  14.  style="background-color: rgb(113, 106, 90); text-align: left; margin-left: auto; margin-right: auto; width: 1224px; height: 368px;"
  15.  border="0" cellpadding="2" cellspacing="2">
  16.   <tbody>
  17.     <tr>
  18.       <td style="background-color: rgb(73, 69, 58);">
  19.       <div style="text-align: center; font-family: Trebuchet MS;"><big><big><span
  20.  style="color: white;">Main Table</span><br>
  21.       </big></big></div>
  22.       <table
  23.  style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
  24.  border="0" cellpadding="2" cellspacing="2">
  25.         <tbody>
  26.           <tr>
  27.             <td style="background-color: rgb(113, 106, 90);">
  28.             <table
  29.  style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
  30.  border="0" cellpadding="2" cellspacing="2">
  31.               <tbody>
  32.                 <tr>
  33.                   <td
  34.  style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
  35.  colspan="3"><iframe name="mon1" src=""
  36.  hspace="50" vspace="50" align="middle"
  37.  height="260" scrolling="no" width="1110"></iframe></td>
  38.                   <td style="width: 147px; vertical-align: top;">DHTML
  39. MENU 1</td>
  40.                 </tr>
  41.                 <tr>
  42.                   <td
  43.  style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
  44. 1</big></td>
  45.                   <td
  46.  style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
  47. 2</big></td>
  48.                   <td style="text-align: center; width: 368px;"><big><span
  49.  style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
  50.                   <td></td>
  51.                 </tr>
  52.               </tbody>
  53.             </table>
  54.             <div
  55.  style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
  56. Bank 1<br>
  57.             </big></div>
  58.             </td>
  59.           </tr>
  60.         </tbody>
  61.       </table>
  62.       <table
  63.  style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
  64.  border="0" cellpadding="2" cellspacing="2">
  65.         <tbody>
  66.           <tr>
  67.             <td style="background-color: rgb(113, 106, 90);">
  68.             <table
  69.  style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
  70.  border="0" cellpadding="2" cellspacing="2">
  71.               <tbody>
  72.                 <tr>
  73.                   <td
  74.  style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
  75.  colspan="3"><iframe name="mon1" src=""
  76.  hspace="50" vspace="50" align="middle"
  77.  height="260" scrolling="no" width="1110"></iframe></td>
  78.                   <td style="width: 147px; vertical-align: top;">DHTML
  79. MENU 2</td>
  80.                 </tr>
  81.                 <tr>
  82.                   <td
  83.  style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
  84. 1</big></td>
  85.                   <td
  86.  style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
  87. 2</big></td>
  88.                   <td style="text-align: center; width: 368px;"><big><span
  89.  style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
  90.                   <td></td>
  91.                 </tr>
  92.               </tbody>
  93.             </table>
  94.             <div
  95.  style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
  96. Bank 2<br>
  97.             </big></div>
  98.             </td>
  99.           </tr>
  100.         </tbody>
  101.       </table>
  102.       <table
  103.  style="width: 1200px; text-align: left; margin-left: auto; margin-right: auto;"
  104.  border="0" cellpadding="2" cellspacing="2">
  105.         <tbody>
  106.           <tr>
  107.             <td style="background-color: rgb(113, 106, 90);">
  108.             <table
  109.  style="text-align: left; background-color: rgb(45, 43, 36); width: 1200px;"
  110.  border="0" cellpadding="2" cellspacing="2">
  111.               <tbody>
  112.                 <tr>
  113.                   <td
  114.  style="text-align: center; vertical-align: middle; height: 256px; width: 1104px;"
  115.  colspan="3"><iframe name="mon1" src=""
  116.  hspace="50" vspace="50" align="middle"
  117.  height="260" scrolling="no" width="1110"></iframe></td>
  118.                   <td style="width: 147px; vertical-align: top;">DHTML
  119. MENU 3</td>
  120.                 </tr>
  121.                 <tr>
  122.                   <td
  123.  style="font-family: Trebuchet MS; text-align: center; vertical-align: middle; width: 368px;"><big>SCREEN
  124. 1</big></td>
  125.                   <td
  126.  style="text-align: center; font-family: Trebuchet MS; width: 368px;"><big>SCREEN
  127. 2</big></td>
  128.                   <td style="text-align: center; width: 368px;"><big><span
  129.  style="font-family: Trebuchet MS;">SCREEN 3</span></big></td>
  130.                   <td></td>
  131.                 </tr>
  132.               </tbody>
  133.             </table>
  134.             <div
  135.  style="text-align: center; font-family: Trebuchet MS;"><big>Monitor
  136. Bank 3<br>
  137.             </big></div>
  138.             </td>
  139.           </tr>
  140.         </tbody>
  141.       </table>
  142.       </td>
  143.     </tr>
  144.   </tbody>
  145. </table>
  146. </body>
  147. </html>
So what I am attempting/wanting to do is be able to dynamically add and remove each of the tables labeled "Monitor Bank 1 thru 3". If I could get all the formatting to work entirely done in Javascript would be nice, otherwise just a Java Script function to hide and unhide each bank would work as well. The menu that will appear beside each bank will be used to change the contents of the iframe in that bank. Hope this clarifys what I am trying to do.

Thanks again.
Oct 24 '07 #3
16,027 Expert Mod 8TB
How are you planning to add and remove rows? Using buttons? You can use one button for adding. For removing, you could have one button for each row or use a checkbox to specify which rows are selected and one button at the bottom for removal.
Oct 25 '07 #4
I thinking that I would have 1 button visible at the bottom of the last bank to add a new one. And then have a button at the top of each bank to delete it sort of like the standard "X" button in MS Windows applications.

That being said adding buttons to call the Javascript functions isn't too hard its writing the javascript and getting it to work thats my hardest challenge.

I have been playing with it a bit and I have got show/hide functions working using the following code.

Expand|Select|Wrap|Line Numbers
  1. function hideBank2() {
  2. if (document.getElementById) { // DOM3 = IE5, NS6
  3. document.getElementById('bank2').style.visibility = 'hidden';
  4. }
  5. else {
  6. if (document.layers) { // Netscape 4
  7. document.hideShow.visibility = 'hidden';
  8. }
  9. else { // IE 4
  10. document.all.hideShow.style.visibility = 'hidden';
  11. }
  12. }
  13. }
  14. function showBank2() {
  15. if (document.getElementById) { // DOM3 = IE5, NS6
  16. document.getElementById('bank2').style.visibility = 'visible';
  17. }
  18. else {
  19. if (document.layers) { // Netscape 4
  20. document.hideShow.visibility = 'visible';
  21. }
  22. else { // IE 4
  23. document.all.hideShow.style.visibility = 'visible';
  24. }
  25. }
  26. }
This works for the second bank and I just added more of these functions for the remainder.

This will work the only thing I don't like about the way it works is that if say I have 3 of the "<div>" 's showing and hide the middle one the bottom one does not move up into the place of the hidden one. Is there an easy fix for this?

Thanks again.
Oct 25 '07 #5
16,027 Expert Mod 8TB
In place of style.visibility = 'visible', use style.display='block' and in place of style.visibility = 'hidden', use style.display = 'none'.
Oct 25 '07 #6

Post your reply

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

Similar topics

7 posts views Thread by Wolfgang Kreuzer | last post: by
1 post views Thread by Harag | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.