Write an html table on the fly in an existing page with Javascript (for a menu I have built)

Ok.  I have this menu I built with Javascript and a little CSS.  I havent gone crazy with CSS yet, I am trying to keep it simple until I can find out if what I am trying to do is possible.  So I have page called "menu.html" It references an external "menu.js" file for some menu navigation.  I would like to build the actual table that holds the menu items with Javascript in the menu.js file instead of having it in the menu.html file.  This way I can include a reference to my menu.js file and in each page and have an onload event that calls a method in the menu.js file to write the html table with the ids, classes, etc.  Is this possible or do I have to include this huge table in each of my html files? Oh, and the file needs to be XHTML.
LVL 1
feenyx360Asked:
Who is Participating?
 
flipzConnect With a Mentor Commented:
Sure you can build a dynamic table in javascript. You can use a series of createElement statements to build each section and append them to each other:
<body>
<div id="divMenu"></div>
 
<script language="JavaScript">
 
function buildTable() {
 
var objTable = document.createElement('table');
var objTBody = document.createElement('tbody');
var objRow = document.createElement('tr');
var objCell = document.createElement('td');
 
objCell.className = 'className';
objCell.innerHTML = 'Some Text Here';
 
objRow.appendChild(objCell);
objTBody.appendChild(objRow);
objTable.appendChild(objTBody);
 
document.getElementById('divMenu').appendChild (objTable);
 
 
}
 
buildTable();
</script>
</body>

Open in new window

0
 
feenyx360Author Commented:
Thank you. Inside of the table data elements I will have links.  I use these links to fire more javascript functions.  Can I  those IDs to those links to.. so objCell.innerHTML = 'a href="#" id="orderLink" onclick="showDiv('ordersSub')">'  Will that be ok with the quotes like that?
0
 
feenyx360Author Commented:
I was on W3schools.com and reading about the HTML Dom Anchor Object.  I can see all the properties and methods there but I don't see where you could set an event for a anchor tag.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
flipzCommented:
Very close - I would try something like this (using &quot; for quotes instead):

var strLink = '<a href="#" id="orderLink" onclick="showDiv(&quot;ordersSub&quot;)">';
objCell.innerHTML = strLink;
0
 
feenyx360Author Commented:
Ahhhhh. Ok I see.  I will give it a shot. Thanks for the quick response Flipz.
0
 
flipzCommented:
No problem - glad to help!
0
 
feenyx360Author Commented:
Error: document.getElementById("divMenu") has no properties
Source File: file:///C:/Documents%20and%20Settings/jhartman.pennwest/Desktop/MenuWork/scripts/menu.js
Line: 38

I get that error when I tried it.  Is this because it's an external js?
0
 
flipzCommented:
Do you have a div with ID 'divMenu' as I did in my example? Can you post the source of your menu.js file that is causing the error?
0
 
feenyx360Author Commented:
got it!
0
 
feenyx360Author Commented:
Dunno what it was but I got it.
0
All Courses

From novice to tech pro — start learning today.