insert html table in iframe

[John Alexander]

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:

<a href="javascript:Display_Table()" target="main">Constellations</a>

<script type="text/javascript">
function Display_Table(){
var numOfCells = 88; 
var columns = 8, rows = Math.ceil(numOfCells / columns), content = "", count = 0;
content = "<table border='1' cellspacing='1' cellpadding='5'>";
for (r = 0; r < rows; r++) {
   content += "<tr>";
   for (c = 0; c < columns; c++) {
      content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
      if (count == numOfCells)break;  // here is check if number of cells equal Number of Pictures to stop
      count++;
   }
   content += "</tr>";
}
content += "</table>";
document.body.innerHTML = content; 
}
</script>

[gits]

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:

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.

[John Alexander]

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

[gits]

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_frame_contentdocument.asp

[John Alexander]

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.

[gits]

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

[John Alexander]

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.

[gits]

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

[John Alexander]

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

<script>
     function DisplayConstellations(selection){
       var Z = trim(Left(ZoneOrder[selection],2));
       var Order = trim(Right(ZoneOrder[selection],2));    
       document.body.innerHTML = "http://localhost/PSC/Documents/Zonesjs/Zone" + Z + ".html?Order=" + Order;
}

    function Display_Table(){
      var numOfCells = 88; 
      var columns = 8, rows = Math.ceil(numOfCells / columns), 
    content = "", count = 0;
    content = "<table border='1' cellspacing='1' cellpadding='5'>";
    for (r = 0; r < rows; r++) {
      content += "<tr>";
      for (c = 0; c < columns; c++) {
      content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
      if (count == numOfCells)break;  // here is check if number of cells equal Number of Pictures to stop
      count++;
      }
      content += "</tr>";
      }
      content += "</table>";
      john.document.body.innerHTML = content; 
      }

[gits]

in your line 5 you have:

document.body.innerHTML = something

this will overwrite the content (=html) of your current scoped window's document.

[John Alexander]

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.

[gits]

linking the other related thread here:

https://bytes.com/topic/javascript/answers/972971-how-do-i-use-html5-table-insert-onclick-into-each-cell-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.