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

insert html table in iframe

P: 38
I have been trying for many years to insert my html table into the lower main iframe with no success. Here is my javascript code:

Expand|Select|Wrap|Line Numbers
  1. <a href="javascript:Display_Table()" target="main">Constellations</a>
  2.  
  3. <script type="text/javascript">
  4. function Display_Table(){
  5. var numOfCells = 88; 
  6. var columns = 8, rows = Math.ceil(numOfCells / columns), content = "", count = 0;
  7. content = "<table border='1' cellspacing='1' cellpadding='5'>";
  8. for (r = 0; r < rows; r++) {
  9.    content += "<tr>";
  10.    for (c = 0; c < columns; c++) {
  11.       content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
  12.       if (count == numOfCells)break;  // here is check if number of cells equal Number of Pictures to stop
  13.       count++;
  14.    }
  15.    content += "</tr>";
  16. }
  17. content += "</table>";
  18. document.body.innerHTML = content; 
  19. }
  20. </script>
Jul 11 '19 #1

✓ answered by gits

in the code you call a method: DisplayConstellations which is assigned to an anchor tag somehow instead of an onclick-event. probably you need to check that function's code.

Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,389
what happens at the moment? the html you create in the function is replacing the content of your window - since you get a reference to the window's document and tell the code to do so with:

Expand|Select|Wrap|Line Numbers
  1. document.body.innerHTML = content;
you cannot target javascript code with a links target-attribute - javascript would need to reference the correct window and then the document in that window. you can use the frames property of your top.window for example to achieve that.
Jul 12 '19 #2

P: 38
I have 2 iframes one for the horizontal menu and the other is underneath the menu iframe to recieve whatever is selected from the menu. I just need some sample code to insert the 88 cells into the iframe so the User can click on a cell and let the corresponding listing appear where the table was. I used to do this before html 5 came out but now I have no idea as to what code I need to use. I am an 81 year old retired vb6 programmer and I am out of touch with the latest methods to use iframes. Thank you for your reply. John
Jul 13 '19 #3

gits
Expert Mod 5K+
P: 5,389
there is not something about latest methods to use frames - except may be to not use any frames at all - everything is usually achieved with css today. for a simple example on how to access an iframe you can start from here:

https://www.w3schools.com/jsref/prop...ntdocument.asp
Jul 14 '19 #4

P: 38
I tried the w3schools.com but no one seems to understand that all I want to do is insert my html5 table into iframe and keep the iframe away from the top iframe.
Jul 15 '19 #5

gits
Expert Mod 5K+
P: 5,389
in the example there the background color of the iframe is set - you can use the same method to reference the iframe's document to set any other content there
Jul 16 '19 #6

P: 38
I managed to get the table into the iframe but the table erased the menu. when I clicked the cell to start a listing the list went to another page.
Jul 16 '19 #7

gits
Expert Mod 5K+
P: 5,389
in the code you call a method: DisplayConstellations which is assigned to an anchor tag somehow instead of an onclick-event. probably you need to check that function's code.
Jul 16 '19 #8

P: 38
I have success with one of the functions but the other
won't cooperate. This is the one that won't go into the iframe
Expand|Select|Wrap|Line Numbers
  1. <script>
  2.      function DisplayConstellations(selection){
  3.        var Z = trim(Left(ZoneOrder[selection],2));
  4.        var Order = trim(Right(ZoneOrder[selection],2));    
  5.        document.body.innerHTML = "http://localhost/PSC/Documents/Zonesjs/Zone" + Z + ".html?Order=" + Order;
  6. }
  7.  
  8.     function Display_Table(){
  9.       var numOfCells = 88; 
  10.       var columns = 8, rows = Math.ceil(numOfCells / columns), 
  11.     content = "", count = 0;
  12.     content = "<table border='1' cellspacing='1' cellpadding='5'>";
  13.     for (r = 0; r < rows; r++) {
  14.       content += "<tr>";
  15.       for (c = 0; c < columns; c++) {
  16.       content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
  17.       if (count == numOfCells)break;  // here is check if number of cells equal Number of Pictures to stop
  18.       count++;
  19.       }
  20.       content += "</tr>";
  21.       }
  22.       content += "</table>";
  23.       john.document.body.innerHTML = content; 
  24.       }
Jul 31 '19 #9

gits
Expert Mod 5K+
P: 5,389
in your line 5 you have:

Expand|Select|Wrap|Line Numbers
  1. document.body.innerHTML = something
this will overwrite the content (=html) of your current scoped window's document.
Aug 1 '19 #10

P: 38
I see that you don't understand what I am looking for. All I wanted was to display a html document in the iframe once a cell was clicked on and the document would replace the table in the iframe.
Aug 22 '19 #11

gits
Expert Mod 5K+
P: 5,389
linking the other related thread here:

https://bytes.com/topic/javascript/a...l-display-file

solution to the issue is in post #20.

The problem isn't that readers dont understand what the OP wanted - the problem is that there is a bunch of messy code that people have to dig through to finally find where the problem is. The shown solution there would solve the requirement but not the issue with the code that is 'shooting yourself in the foot'. Using proper CSS and JavaScript here would make the entire thing much more understandable and maintainable.
Aug 23 '19 #12

Post your reply

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