?
Solved

Create HTML table with XML and JavaScript

Posted on 2009-04-21
2
Medium Priority
?
1,043 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:Stratocaster
1 Comment
 
LVL 3

Accepted Solution

by:
SPARC-DESIGN earned 400 total points
ID: 24372058
why don't you use an XSL stylesheet??
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question