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

**gits** · Aug 7 '19, 10:44 AM

what is the exact problem that you have with that shown code?

**John Alexander** · Aug 7 '19, 06:52 PM

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.

**gits** · Aug 8 '19, 08:07 AM

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 DisplayConstell ations with an integer determined by your count as you construct the table. So potential calls after that are:

Code:

DisplayConstellations(0)
...
DisplayConstellations(87)

is that what you want to achieve?

**John Alexander** · Aug 8 '19, 01:21 PM

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.

**gits** · Aug 8 '19, 01:43 PM

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:

Code:

content += "<td onclick='DisplayConstellations(" + count ....

**John Alexander** · Aug 8 '19, 08:09 PM

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.

**gits** · Aug 8 '19, 09:12 PM

look close at the fixed line i posted above - between the td and onclick - thats whats wrong in your line

**John Alexander** · Aug 10 '19, 03:17 PM

I ended up with this but it only created empty cells.

Code:

content += "<td onclick='DisplayConstellations(" + count + ")'>" + ConName[count] + "</td>";

Code:

function Display_Table(){
    var numOfCells = 88; 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 onclick='DisplayConstellations(" + count + ");'>" + ConName[count] + "</td>";
	    if (count == numOfCells)break;  
      		count++;
   	     }
   		content += "</tr>";
	}
	content += "</table>";
    john.document.body.innerHTML = content; // insert `content` into iframe

}

**gits** · Aug 12 '19, 06:46 AM

if you only have empty cells you need to check:

Code:

ConName[count]

since that is what you use to get the content for the cells from.

**John Alexander** · Aug 19 '19, 12:55 AM

I had to go back to using content += "<td><a href= 'javascript:Dis playConstellati ons(" + 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:Disp layConstellatio ns(0) and I still can;t get the function DisplayConstell ation to display in the iframe to replace the table.

**gits** · Aug 19 '19, 09:26 AM

here is a reduced slightly modified and working example of your code with the onclick-handler:

Code:

<html>

<script type="application/javascript">

function Display_Table(){

    var numOfCells = 88; 
    var columns = 8;
    var rows = Math.ceil(numOfCells / columns);
    var content = "";
    var 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 onclick='DisplayConstellations(" + count + ");'>" + count + "</td>";
            count++;
        } 
        
        content += "</tr>";
    }
    content += "</table>";

    document.body.innerHTML = content;
}

function DisplayConstellations(p) { console.log(p) };

</script>

<body onload="Display_Table()">

</body>

</html>

you need to make sure that the DisplayConstell ations-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.

**John Alexander** · Aug 19 '19, 01:44 PM

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.i nnerHTML= 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

**gits** · Aug 19 '19, 01:57 PM

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.

**John Alexander** · Aug 19 '19, 09:38 PM

I have a working copy here but the output won't go in the iframe and that is what I need.

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/w3css/3/w3.css">
<head>   
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/includedata.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone1.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone2.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone3.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone4.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone5.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone6.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone7.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone8.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone9.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone10.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone11.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Zone12.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCONE.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTWO.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCTHREE.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NGCFOUR.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_NONNGC.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars1.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constars2.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/zonesjs/Load_Constell_centers.js"></script>
<script type="text/javascript" src="http://localhost/PSC/Documents/Zonesjs/functions.js"></script>
</HEAD>
<style type="text/css">
#div1 {margin:10px;font-size:1.25em;}
table {border-collapse:collapse;border:1px solid #7f7f7f;}
td {border:1px solid #7f7f7f;width:50px;height:50px;text-align:center;}
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

<body text="#FFFFFF" bgcolor="#000000" >
<BODY>

<!-- Navigation -->
<nav class="w3-bar w3-black">
  <a target="_parent"  href="javascript:Display_Table()">Constellations</a>
  <a href="#band" class="w3-button w3-bar-item">Band</a>
  <a href="#tour" class="w3-button w3-bar-item">Tour</a>
  <a href="#contact" class="w3-button w3-bar-item">Contact</a>
</nav>

<script type="text/javascript">
function DisplayConstellations(selection){
var Z = trim(Left(ZoneOrder[selection],2));
var Order = trim(Right(ZoneOrder[selection],2));    
// document.getElementById('LABEL1').value = Zone[Z-1][Order-1]; 
 location ="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>";
document.body.innerHTML = content; // insert `content` value into body of page
}
</script>
</ul>
</li>
</body>
</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

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment