And I've another problem. Until now I haven't worked with the actual XML-file. That's located here
I've changed the url in my html-file, but then it isn't working.
Normally for security reasons you cannot load an XML file which is located in a different domain (server) than the one hosts your HTML file..
If this is the case, you have to use server side solution (eg. php) to access the remote xml file.
Rregarding the code for table:
Firstly, In this line I had missed a closing single quote: TableCode='<table width="200" border="1">'
Please read the code comments (I've tried to explain in more details the code parts) :
JS:
/*
The next JS reads the "Team" elements of our loaded xml file and dynamically (at run time)
creates a html table to display selected info from loaded data.
A "for" loop runs for every found "Team" node, and gets the appropriate values which incorporate in a string (text) variable.
This variable will replace the "innerHTML" of our placeholder (a simple "div" html tag) so that the generated
table becomes part (and displayed) of our html document
*/
var TeamNodes=xmlDoc.getElementsByTagName("Team") // Returns an array of all "Team" nodes of the .xml file
// How to access specific nodes:
// TeamNodes[0] => the 1st "Team" element (the array is zero based)
// TeamNodes[1] => the 2nd "Team" element
// and so on...
var TableCode=""; // A text variable to keep the generated HTML code
TableCode='<table width="400" border="1">' // The table start tag
// Run the "for" loop to process all array's elements ("Team" nodes)
for (var i=0; i<TeamNodes.length; i++){ // TeamNodes.length => the total number of array's elements
// Get the values we want (in these case all are attributes of our "Team" element)
var Name=TeamNodes[i].getAttribute("teamName"); // TeamNodes[i] => is the current element
var Goals=TeamNodes[i].getAttribute("goals");
var DateVal=TeamNodes[i].getAttribute("date");
// if want to get a nodeValue (not attribute) then use: var Value=TeamNodes[i].nodeValue
// NOTE: The node should have a nodeValue (must not empty) for the previous to have meaning,
// eg. <node Attr="This is an attribute">This is nodeValue</node>
// For each "Team" node, add a table row with 3 columns (Name, Goals and DateVal hold actual values -the attributes values- read from the xml file)
// the HTML code line generated has the form: <tr><td>Team Name</td><td>8</td><td>2008-07-22 19:00</td></tr>
TableCode+= '<tr><td>' + Name + '</td><td>' + Goals + '</td><td>' + DateVal + '</td></tr>\n'
}
TableCode+='</table>' // Once the "for" finished, we add the close tag of table
document.getElementById("TableDiv").innerHTML=TableCode // Write the generated code to our document (replace the "TableDiv" contents)
-----------------------------------------------------
Regarding the auto generation of IDs and how to parse all "Match" nodes of your file
(In general when use a "for" loop to parse all the children of an element, you don't need to know the exactly number of children nodes..
just the "for" runs for all of the given node list or array children, and you can add or remove data from your xml without problem)..
Here is a complete example of parsing all "Match" nodes of the xml and generating
html table(s) to display the input xml data. (Every "Match" element shown in its own array -for clarification reasons- ):
1) Save this .xml code in a file named "Team.xml":
(This may content any number of "Match" elements, and every "Match" element may have any number of children..
here i use this xml snippet as an example)
<?xml version="1.0" encoding="utf-8" ?>
<ManagerZone_MatchList>
<Match id="263736548" date="2008-07-29 19:00" status="played" type="national_friendly" typeName="" typeId="">
<Team field="home" goals="7" teamId="122" teamName="Netherlands" countryShortname="" />
<Team field="away" goals="0" teamId="855911" teamName="Ukraine" countryShortname="" />
</Match>
<Match id="263736544" date="2008-07-25 11:00" status="played" type="national_friendly" typeName="" typeId="">
<Team field="home" goals="3" teamId="122" teamName="Netherlands" countryShortname="" />
<Team field="away" goals="0" teamId="498688" teamName="Ecuador" countryShortname="" />
</Match>
<Match id="252179958" date="2008-07-22 19:00" status="played" type="national_friendly" typeName="" typeId="">
<Team field="home" goals="3" teamId="122" teamName="Netherlands" countryShortname="" />
<Team field="away" goals="3" teamId="106" teamName="Czech Republic" countryShortname="" />
</Match>
<Match id="251618380" date="2008-07-18 19:00" status="played" type="national_friendly" typeName="" typeId="">
<Team field="home" goals="2" teamId="122" teamName="Netherlands" countryShortname="" />
<Team field="away" goals="3" teamId="103" teamName="Belgium" countryShortname="" />
</Match>
<Match id="251618386" date="2008-07-15 19:00" status="played" type="national_friendly" typeName="" typeId="">
<Team field="home" goals="3" teamId="103" teamName="Belgium" countryShortname="" />
<Team field="away" goals="2" teamId="122" teamName="Netherlands" countryShortname="" />
</Match>
</ManagerZone_MatchList>
2) Paste this HTML to a new document (based on your initial HTML file):
(The JS part, read the xml, and create tables to show the input xml data)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript">
function parseXML()
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc = document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
}
xmlDoc.async=false;
// xmlDoc.load("http://www.freewebs.com/bbson/MZ%20xml.xml");
xmlDoc.load("Team.xml")
// ---------------------- Process the load xml file (to generate HTML code, to display the xml data on tables)---------------------------------
var Matches=xmlDoc.getElementsByTagName("Match") // An array of all "Match" nodes
var OutputCode="" // Will keep the HTML code (which will be generated from this script)
for (var a=0; a<Matches.length; a++) { // Run a "for" loop to read all "Match" nodes and their children ("Team" nodes)
var CurrentMatch=Matches[a]
// Read the various "Match" element's attributes
var id=CurrentMatch.getAttribute("id") // OR: CurrentMatch.attributes[0].value
var date=CurrentMatch.getAttribute("date")
var status=CurrentMatch.getAttribute("status")
var type=CurrentMatch.getAttribute("type")
// The match info (and tables declaration)
OutputCode+='<br/><br/> <b>' + (a+1) + ') Match id: </b>' + id + '<br/><b> Status: </b>' + status + '<br/><b> Type: </b>' + type
OutputCode+='<br/><br/> <table border="1" width="400" borderColor="#445566" cellspacing="0" cellpadding="10" style="background:#d7dedf; font:12px verdana; border-collapse:collapse">\n\n'
// The "Date" cell
OutputCode+='<tr><th align="center" colspan="4"> Date: ' + date + '</th></tr>\n'
// The Titles cells (Field, Goals, Team id, Team)
OutputCode+='<tr align="center" style="background:#447788; color:#ffffff"><th>Field</th><th>Goals</th><th>Team Id</th><th>Team Name</th></tr>\n'
// A second nested "for" to process the "Match" 's children ("Team" nodes)
var Teams=CurrentMatch.childNodes
for (var b=0; b<Teams.length; b++) {
if (Teams[b].nodeType==1 ) { // If child is an element node (to avoid empty or text nodes)
var field=Teams[b].getAttribute("field")
var goals=Teams[b].getAttribute("goals")
var teamId=Teams[b].getAttribute("teamId")
var teamName=Teams[b].getAttribute("teamName")
// Write each "Team" statistics
OutputCode+='<tr align="center"><td>' + field + '</td><td>' + goals + '</td><td>' + teamId + '</td><td>' + teamName + '</td></tr>\n'
}
}
OutputCode+='</table><br/>\n\n' // Close the table for the current match (the same repeated for every "Match" node)
} // End of : " for (var a=0; a..."
// ---------------------- Process the load xml file (to generate HTML code, to display the xml data on tables) (END) ---------------------------
// Replace the contents of our placeholder html div
document.getElementById("TableDiv").innerHTML=OutputCode
}
</script>
</head>
<body style="font:13px verdana" onload="parseXML()">
<h1>Wedstrijden</h1>
<hr/>
<h2>Match List:</h2>
<div name="TableDiv" id="TableDiv">
<!-- This will replaced by the generated code (the tables) -->
</div>
</body>
</html>
NOTE: This based exclusively on JavaScript, to format the html document, however by using for example an .xsl (xml Stylesheet ) file
(either declared it directly into the .xml file or loaded with javascript) is a better approach..
(This requires of course a basic knowledge of xpath, xslt)
Regards!
Kostas