Create HTML table with XML and JavaScript

Hello All,

I am working on a site (for free) that needs a schedule that is fairly easy to update for a person with limited understanding of HTML. I am trying to use XML and JavaScript to create the schedule to post on the site.  There are a couple of problems I'm running in to. 1.) I can't get the script to parse more than one set of records in the XML file. 2.) I can't seem to apply any styles to the html document. The code is below (html and then XML)  and the sample page I need to get it into is http://nslemmons.com/jimvolk/schedule.html

Thanks in advance.

--Stratocaster
<html>
<head>
<link rel="stylesheet" type="text/css" href="jVolkStyles.css" />
<title>Jim Volk's Schedule</title>
</head>
<body>
 
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("schedule.xml");
 
document.write("<table border='0' cellspacing='5' width=35%>");
 
var x=xmlDoc.getElementsByTagName("schedule");
for (i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write("Location");
document.write("</td>");
document.write("<td>");
document.write("Date");
document.write("</td>");
document.write("<td>");
document.write("Time");
document.write("</td>");
document.write("<td>");
document.write("City");
document.write("</td>");
document.write("<td>");
document.write("State");
document.write("</td>");
document.write("<td>");
document.write("Address");
document.write("</td>");
document.write("<td>");
document.write("Note");
document.write("</td>");
document.write("</tr>");
document.write("<tr class='rowData'>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("loc")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("city")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("state")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("note")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
 
</body>
</html>
 
 
 
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="schedule.css"?>
 
<schedule>
 
<event>
<loc>Canterbury scscsCoffee</loc>
<date>3/18/09</date>
<time>7:30PM</time>
<city>Bellefontaine</city>
<state>Ohio</state>
<address>135 W. Columbus Ave.</address>
<note>Free show, no cover</note>
</event>
 
<event>
<loc>Some Bar</loc>
<date>3/25/09</date>
<time>7:30PM</time>
<city>Columbus</city>
<state>Ohio</state>
<address>555 Fake St.</address>
<note>Free show, no cover</note>
</event>
 
</schedule>

Open in new window

StratocasterAsked:
Who is Participating?
 
SPARC-DESIGNCommented:
why don't you use an XSL stylesheet??
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.