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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

flipzCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.