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

How do I use a html5 table to insert onclick into each cell to display a file?

P: 38
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2.       <html lang="en'>
  3.     <meta charset=utf-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <head>
  6.     <title>Pilot Star Catalogue</title>
  7.     <script type="text/javascript" 
  8.  src="http://localhost/PSC/Documents/zonesjs/includedata.js"></script>
  9. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone1.js"></script>
  10. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone2.js"></script>
  11. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone3.js"></script>
  12. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone4.js"></script>
  13. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone5.js"></script>
  14. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone6.js"></script>
  15. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone7.js"></script>
  16. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone8.js"></script>
  17. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone9.js"></script>
  18. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone10.js"></script>
  19. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone11.js"></script>
  20. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone12.js"></script>
  21. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCONE.js"></script>
  22. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTWO.js"></script>
  23. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTHREE.js"></script>
  24. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCFOUR.js"></script>
  25. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NONNGC.js"></script>
  26. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars1.js"></script>
  27. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars2.js"></script>
  28. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constell_centers.js"></script>
  29. <script type="text/javascript" src="http://localhost/PSC/Documents/Zonesjs/functions.js"></script>
  30.  
  31. <style type="text/css">
  32.         ul.cssMenu, ul.cssMenu ul
  33.         {list-style:none;
  34.             margin:0; padding:0;
  35.             position: relative;
  36.         }
  37.  
  38.         /*Style for 1st level menu header*/
  39.         ul.cssMenu li
  40.         { 
  41.             position: relative; 
  42.             float: left; 
  43.             zoom: 1; /*Needed for IE*/
  44.             background: #DDDDDD; /*background color of menu header (1st level)*/
  45.         }
  46.         ul.cssMenu li:hover
  47.         { 
  48.             background: #AAAAAA /*background color of menu header (1st level) on hover*/; 
  49.         }
  50.         ul.cssMenu li a
  51.         {
  52.             /*Menu link styles*/
  53.             display: block; 
  54.             padding: 5px; 
  55.             color:#000000;
  56.             font-family: Arial, Times New Roman, Tahoma;
  57.             font-size: 12px;
  58.         }
  59.  
  60.         /* Building menu items - for 2nd and more level menu items*/
  61.         ul.cssMenu ul                         
  62.         { 
  63.             display:none; /*initially menu item is hidden*/
  64.             position: absolute; /*absolute positioning is important for menu to float*/
  65.             width: 150px; 
  66.  
  67.             /*Formating of menu items*/
  68.             border:1px solid #AAAAAA;
  69.             padding:1px;
  70.             background:#FFFFFF;
  71.  
  72.             /*optional - to change position of 2nd level menu item*/
  73.             top: 100%; 
  74.             left: 0; 
  75.         }
  76.         ul.cssMenu ul li
  77.         { 
  78.             background: #F5F5F5; 
  79.             color: #000; 
  80.             border-bottom: 1px solid #DDDDDD; 
  81.             float: none; 
  82.         }
  83.  
  84.         ul.cssMenu ul li a
  85.         { 
  86.             width: 100%; 
  87.             display: block; 
  88.             color:#000000;
  89.         } 
  90.  
  91.         /* Menu item position for 3rd level and more */
  92.         ul.cssMenu ul ul
  93.         { 
  94.             left: 100%; 
  95.             top: 0; 
  96.         }
  97.  
  98.         /* Hover effect for menu*/
  99.         ul.cssMenu li:hover > ul             
  100.         { 
  101.             display:block;
  102.         }
  103.     </style>
  104. </head>
  105.  
  106. <body text="#FFFFFF" bgcolor="#000000" >
  107. <BODY>
  108.  
  109. <input type=text id= "LABEL1" Name = LABEL1 VALUE="Zone 1 - 1  Cassiopeia   The Queen              CAS   PSC     1 -  46    7-Dec" style="border:1px solid #000000; position: absolute; left:326px; top: 34px; width:686px; height:30;font-family:Courier New; font-size:10pt; color:#FFFF00; font-weight:bold; background-color:#000000" size="20"> 
  110. <input type=text Name = LABEL2 VALUE="* Pilot Star => R.A.      Dec.    Mag                                       Offsets"        style="border:1px solid #000000; position: absolute; left: 0px; top:50px; width:800px; height:30;font-family:Courier New; font-size:10pt; color:#00FFFF; font-weight:bold; background-color:#000000" size="20"> 
  111. <input type=text Name = LABEL3 VALUE="PSC   NGC    Type  Mag    Size       NGC  Description                RFS   DEC   RFO   RAM" style="border:1px solid #000000; position: absolute; left: 0px; top:70px; width:800px; height:30;font-family:Courier New; font-size:10pt; color:#00FFFF; font-weight:bold; background-color:#000000" size="20"> 
  112.  
  113.     <div style="height:25px;">
  114.     <ul class="cssMenu">
  115.         <li>
  116.             <a href="#">Constellations</a>           
  117.             <ul>
  118.                 <li><a href="javascript:Display_Table();">Display Table</a></li>
  119.          </ul>    
  120.        </li>
  121.             </li>
  122.             </ul>
  123.         </div>
  124. <div id="contentframe" style="position:relative; top: 100px; left: 50px;">
  125. <iframe name = 'john' id="iframeid" width= "900" height = "700" ></iframe>
  126. <div id="contentframe" style="position:absolute; top: 0px; left: 690px;">
  127.  
  128. <script type="text/javascript">
  129. var Z;     var Order; 
  130. function Display_Table(){
  131.       var numOfCells = 88; 
  132.       var columns = 8, rows = Math.ceil(numOfCells / columns), content = "", count = 0;
  133.       content = "<table border='1' cellspacing='1' cellpadding='5'>";
  134.       for (r = 0; r < rows; r++) {
  135.          content += "<tr>";
  136.          for (c = 0; c < columns; c++) {
  137.              content += "<td><onclick='DisplayConstellations(" + count + ");'>" + ConName[count] + "</td>";
  138.       if (count == numOfCells)break; 
  139.       count++;
  140.     } 
  141.     content += "</tr>";
  142.     }
  143.     content += "</table>";
  144.     john.document.body.innerHTML = content; // insert `content` value into body of page
  145.  
  146.     }
  147.     function DisplayConstellations(selection){
  148.       var Z = trim(Left(ZoneOrder[selection],2));
  149.       var Order = trim(Right(ZoneOrder[selection],2));    
  150.       // document.getElementById('LABEL1').value = Zone[Z-1][Order-1]; 
  151.      john.location = "http://localhost/PSC/Documents/Zonesjs/Zone" + Z + ".html?Order=" + Order;
  152.     }
  153.     </script>
  154. </body>
  155. </html>
  156.  
2 Weeks Ago #1
Share this Question
Share on Google+
19 Replies


gits
Expert Mod 5K+
P: 5,297
what is the exact problem that you have with that shown code?
2 Weeks Ago #2

P: 38
I am unable to type the correct format line in the function Display_Table() where I try to use the onclick command to insert the name of the file in my directory that replaces the table after the cell is clicked. I am new at using onclick in javascript.
2 Weeks Ago #3

gits
Expert Mod 5K+
P: 5,297
nothing special with 'onclick' - what you do is assigning an event handler to an element - in your case a td-element with it, so that in case the element is clicked the assigned function is called.

what you want to do is somehow clear - but what exactly is not working or throws an error? i suggest that you open the developer tools of your browser and look at the errors there. so far when clicking a td you would call the function DisplayConstellations with an integer determined by your count as you construct the table. So potential calls after that are:

Expand|Select|Wrap|Line Numbers
  1. DisplayConstellations(0)
  2. ...
  3. DisplayConstellations(87)
is that what you want to achieve?
2 Weeks Ago #4

P: 38
yes exactly that but when I click on the cell nothing happens. I can't help feeling that the quote marks are in the wrong place whee I am inserting the onclick so that is why I am on here.
2 Weeks Ago #5

gits
Expert Mod 5K+
P: 5,297
well - onclick is an attribute (more a property) of the node you want the event to be called on. so you have to fix line 137 in your code:

Expand|Select|Wrap|Line Numbers
  1. content += "<td onclick='DisplayConstellations(" + count ....
2 Weeks Ago #6

P: 38
yes I realize that is the troble line of code but there are so many quotes involved that I get confused what gets a quote and what doesn't. I have four directories filled with tryitout functions in html and javascript that I have no idea anymore as what I am doing.
2 Weeks Ago #7

gits
Expert Mod 5K+
P: 5,297
look close at the fixed line i posted above - between the td and onclick - thats whats wrong in your line
2 Weeks Ago #8

P: 38
I ended up with this but it only created empty cells.
Expand|Select|Wrap|Line Numbers
  1. content += "<td onclick='DisplayConstellations(" + count + ")'>" + ConName[count] + "</td>";
Expand|Select|Wrap|Line Numbers
  1. function Display_Table(){
  2.     var numOfCells = 88; columns = 8;
  3.     rows = Math.ceil(numOfCells / columns), content = "", count = 0;
  4.     content = "<table border='1' cellspacing='1' cellpadding='5'>";
  5.     for (r = 0; r < rows; r++) {
  6.        content += "<tr>";
  7.        for (c = 0; c < columns; c++) {
  8.           content += "<td onclick='DisplayConstellations(" + count + ");'>" + ConName[count] + "</td>";
  9.         if (count == numOfCells)break;  
  10.               count++;
  11.             }
  12.            content += "</tr>";
  13.     }
  14.     content += "</table>";
  15.     john.document.body.innerHTML = content; // insert `content` into iframe
  16.  
  17. }
1 Week Ago #9

gits
Expert Mod 5K+
P: 5,297
if you only have empty cells you need to check:

Expand|Select|Wrap|Line Numbers
  1. ConName[count] 
since that is what you use to get the content for the cells from.
1 Week Ago #10

P: 38
I had to go back to using content += "<td><a href= 'javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>"; since the onclick didn't work. I right clicked with the mouse button and selected copy what was in the cell and it said javascript:DisplayConstellations(0) and I still can;t get the function DisplayConstellation to display in the iframe to replace the table.
4 Days Ago #11

gits
Expert Mod 5K+
P: 5,297
here is a reduced slightly modified and working example of your code with the onclick-handler:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <script type="application/javascript">
  4.  
  5. function Display_Table(){
  6.  
  7.     var numOfCells = 88; 
  8.     var columns = 8;
  9.     var rows = Math.ceil(numOfCells / columns);
  10.     var content = "";
  11.     var count = 0;
  12.  
  13.     content = "<table border='1' cellspacing='1' cellpadding='5'>";
  14.  
  15.     for (r = 0; r < rows; r++) {
  16.         content += "<tr>";
  17.  
  18.         for (c = 0; c < columns; c++) {
  19.             content += "<td onclick='DisplayConstellations(" + count + ");'>" + count + "</td>";
  20.             count++;
  21.         } 
  22.  
  23.         content += "</tr>";
  24.     }
  25.     content += "</table>";
  26.  
  27.     document.body.innerHTML = content;
  28. }
  29.  
  30. function DisplayConstellations(p) { console.log(p) };
  31.  
  32. </script>
  33.  
  34. <body onload="Display_Table()">
  35.  
  36. </body>
  37.  
  38. </html>
you need to make sure that the DisplayConstellations-method is working as you intend it to work - to me it looks a bit weird - you use a trim-, left- and right-function there and whatnot - its impossible to know what those methods do and whether they work right - since those are no native methods.
3 Days Ago #12

P: 38
I have the menu to load Display_Table() and the iframe receives the table at the end of the function so without including the iframe's name in the document.body.innerHTML= content the table won't go into the iframe. removing the name of the constellation where you put count won't tell the user what constellation to click on. As far as the left right function go they have been in this since 2001
3 Days Ago #13

gits
Expert Mod 5K+
P: 5,297
well - what i did post before was just an example to demonstrate how the basic structure you have work with the onclick-events (using count as content as well was just due to put anything there since nowhere here is any information of what ConName contains). Events always work - non working events are not the issue in your case.

we wont be able to solve this problem here that way - you only put bits and pieces up that dont directly relate to each other. If it was only the onclick - its solved up there. Now something completely different doesnt work and the related code is just missing. If you dont want to post the code - at least open the developer console of your browser and post the error-messages that it shows. Writing JavaScript code isn't trial and error - its simple logic and writing syntactically correct as with any other programming language.
3 Days Ago #14

P: 38
I have a working copy here but the output won't go in the iframe and that is what I need.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link rel="stylesheet" href="/w3css/3/w3.css">
  6. <head>   
  7. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/includedata.js"></script>
  8. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone1.js"></script>
  9. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone2.js"></script>
  10. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone3.js"></script>
  11. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone4.js"></script>
  12. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone5.js"></script>
  13. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone6.js"></script>
  14. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone7.js"></script>
  15. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone8.js"></script>
  16. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone9.js"></script>
  17. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone10.js"></script>
  18. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone11.js"></script>
  19. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone12.js"></script>
  20. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCONE.js"></script>
  21. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTWO.js"></script>
  22. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTHREE.js"></script>
  23. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCFOUR.js"></script>
  24. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NONNGC.js"></script>
  25. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars1.js"></script>
  26. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars2.js"></script>
  27. <script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constell_centers.js"></script>
  28. <script type="text/javascript" src="http://localhost/PSC/Documents/Zonesjs/functions.js"></script>
  29. </HEAD>
  30. <style type="text/css">
  31. #div1 {margin:10px;font-size:1.25em;}
  32. table {border-collapse:collapse;border:1px solid #7f7f7f;}
  33. td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}
  34.   ul {list-style: none;padding: 0px;margin: 0px;}
  35.   ul li {display: block;position: relative;float: left;border:1px solid #000}
  36.   li ul {display: none;}
  37.   ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
  38.            white-space: nowrap;color: #fff;}
  39.   ul li a:hover {background: #f00;}
  40.   li:hover ul {display: block; position: absolute;}
  41.   li:hover li {float: none;}
  42.   li:hover a {background: #f00;}
  43.   li:hover li a:hover {background: #000;}
  44.   #drop-nav li ul li {border-top: 0px;}
  45. </style>
  46.  
  47. <body text="#FFFFFF" bgcolor="#000000" >
  48. <BODY>
  49.  
  50. <!-- Navigation -->
  51. <nav class="w3-bar w3-black">
  52.   <a target="_parent"  href="javascript:Display_Table()">Constellations</a>
  53.   <a href="#band" class="w3-button w3-bar-item">Band</a>
  54.   <a href="#tour" class="w3-button w3-bar-item">Tour</a>
  55.   <a href="#contact" class="w3-button w3-bar-item">Contact</a>
  56. </nav>
  57.  
  58. <script type="text/javascript">
  59. function DisplayConstellations(selection){
  60. var Z = trim(Left(ZoneOrder[selection],2));
  61. var Order = trim(Right(ZoneOrder[selection],2));    
  62. // document.getElementById('LABEL1').value = Zone[Z-1][Order-1]; 
  63.  location ="http://localhost/PSC/Documents/Zonesjs/Zone" + Z + ".html?Order=" + Order;
  64. }
  65. function Display_Table(){
  66. var numOfCells = 88; 
  67. var columns = 8, rows = Math.ceil(numOfCells / columns), content = "", count = 0;
  68. content = "<table border='1' cellspacing='1' cellpadding='5'>";
  69. for (r = 0; r < rows; r++) {
  70.    content += "<tr>";
  71.    for (c = 0; c < columns; c++) {
  72.       content += "<td><a HREF='javascript:DisplayConstellations(" + count + ");'>" + ConName[count] + "</a></td>";
  73.       if (count == numOfCells)break;  // here is check if number of cells equal Number of Pictures to stop
  74.       count++;
  75.    }
  76.    content += "</tr>";
  77. }
  78. content += "</table>";
  79. document.body.innerHTML = content; // insert `content` value into body of page
  80. }
  81. </script>
  82. </ul>
  83. </li>
  84. </body>
  85. </html>
I won't be able to give you the programs that are included at the beginning of the function as there are too many to list
3 Days Ago #15

P: 38
I have the utility functions here that include left and right strings. There hasn't been any new problems as there is the only problem is getting the cells to display the documents in the iframe called john.
Expand|Select|Wrap|Line Numbers
  1. function ltrim(str) { 
  2.     for(var k = 0; k < str.length && isWhitespace(str.charAt(k)); k++);
  3.     return str.substring(k, str.length);
  4. }
  5. function rtrim(str) {
  6.     for(var j=str.length-1; j>=0 && isWhitespace(str.charAt(j)) ; j--) ;
  7.     return str.substring(0,j+1);
  8. }
  9. function trim(str) {
  10.     return ltrim(rtrim(str));
  11. }
  12. function isWhitespace(charToCheck) {
  13.     var whitespaceChars = " \t\n\r\f";
  14.     return (whitespaceChars.indexOf(charToCheck) != -1);
  15. }
  16.  
  17. function Val(String){
  18.     return parseFloat(String);
  19.         }
  20.  
  21. function Left(str, n){
  22.     if (n <= 0)
  23.         return "";
  24.     else if (n > String(str).length)
  25.         return str;
  26.     else
  27.         return String(str).substring(0,n);
  28. }
  29. function Right(str, n){
  30.     if (n <= 0)
  31.        return "";
  32.     else if (n > String(str).length)
  33.        return str;
  34.     else {
  35.        var iLen = String(str).length;
  36.        return String(str).substring(iLen, iLen - n);
  37.     }
  38. }
  39. function Mid(strInput,intStart,intLength){
  40.     return strInput.substring(intStart,intLength);   }
2 Days Ago #16

P: 38
Expand|Select|Wrap|Line Numbers
  1. var ConName=new Array();
  2. ConName[0]="Andromeda";
  3. ConName[1]="Antlia";
  4. ConName[2]="Apus";
  5. ConName[3]="Aquarius";
  6. ConName[4]="Aquila";
  7. ConName[5]="Ara";
  8. ConName[6]="Aries";
  9. ConName[7]="Auriga";
  10. ConName[8]="Bootes";
  11. ConName[9]="Caelum";
  12. ConName[10]="Camelopardalis";
  13.  
2 Days Ago #17

gits
Expert Mod 5K+
P: 5,297
we need the related code only and make simplified examples - that will even help yourself to get to the point where it has an error.

With the code you currently use - i am pretty sure that the issue is that in your Display_Table method. there you use:

Expand|Select|Wrap|Line Numbers
  1. document.body.innerHTML = content;
which replaces the entire existing DOM with the table you create there - so the iframe or any other node that you created before simply doesnt exist anymore. you need to either create the iframe in that function as well or use other DOM manipulation methods to insert the created table into the DOM.
1 Days ago #18

P: 38
I do not receive any errors as it just won't display the listing from DisplayConstellations. In the previous code it displays the constellation names in the clickable cells but when I click on the cells, the listing does not display in the iframe.
1 Days ago #19

gits
Expert Mod 5K+
P: 5,297
well - now i double checked what you probably try to do by going back to your first post in this thread - since it started to become a bit messy with all this different code.

You obviously create the table in the iframe and you want to assign an eventhandler to the cells that you dynamically created in that iframe. while you have the code for the eventhandler still in the parent window. this is messing up the scope - and when you check the developer console it will tell you something like:

Expand|Select|Wrap|Line Numbers
  1. Uncaught ReferenceError: DisplayConstellations is not defined
this is a simple scope issue. each window has its own scope and you cannot access anything globally across them. you need to reference the windows correctly - in your case you would probably be already fine with:

Expand|Select|Wrap|Line Numbers
  1. onclick='parent.DisplayConstellations(" + count + ");'
since the method is declared in the parent window thus you would have to access it there.
18 Hours Ago #20

Post your reply

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