Xml, Javascript, And Interactive Table

[casper3912]

I'm a novice at coding working on a school project. I am in charge of a page that keeps track of student events. I don't feel like manually updating a HTML table every time there is an event update. I also want users to be able to navigate through the games and events with out looking at a massive table. along with filter the events displayed based on what type of event it is. I don't believe our school has PHP, and i'm not experienced in databases. I also want the table to be able to be displayed on multiple pages. The below is what i have so far. I'm new to xml so hopefully my method doesn't seem... inefficient. This is my Javascript and xml Dom.

// JavaScript Documentfunction loadXMLDoc(dname) {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)}  }try   {  xmlDoc.async=false;  xmlDoc.load(dname);  return(xmlDoc);  }catch(e) {alert(e.message)}return(null);}// load xml doc, requires loadxml function xmlDoc=loadXMLDoc("xml/EventPage.xml");//end load//begin variablesB=0;a=0;//end variables//begin functionsfunction ForwardSport()	{B+=1};function BackwardSport()	{B-=1};function ForwardGame()	{a+=4};function BackwardGame()	{a-=4};//end functions  //begin table for buttons document.write("<table>");  document.write("<tr>");  document.write("<td>");  document.write("<button onclick=\"FowardSport ()\"> Next Sport</button>");  document.write("</td>"); document.write("<td>");  document.write("<button onclick=\"BackwardSport ()\"> Last Sport</button>"); document.write("</td>"); document.write("<td>");  document.write("<button onclick=\"FowardGame ()\"> Next Game</button>");  document.write("</td>"); document.write("<td>"); document.write("<button onclick=\"BackwardGame ()\"> Last Game</button>"); document.write("</td>");  document.write("</tr>");  document.write("</table>");// end table for buttons//Titledocument.write("<center>");document.write("<span>");x=xmlDoc.getElementsByTagName("Sport")[B].childNodes[0];txt=x.nodeValue;document.write("'+txt+'"); document.write("</span>"); document.write("</center>"); //end title  // begin table for data displaydocument.write("<table>");document.write("<th> date </th>");document.write("<th> Time </th>");document.write("<th> Where</th>");document.write("<th> Vrs. </th>");document.write("<tr>");document.write("<td>");		   x=xmlDoc.getElementsByTagName("Sport")[B].childNodes[a+1];txt=x.nodeValue;document.write(""+txt+"");document.write("</td>");document.write("<td>");x=xmlDoc.getElementsByTagName("Sport")[B].childNodes[a+2];txt=x.nodeValue;document.write(txt);document.write("</td>");document.write("<td>");x=xmlDoc.getElementsByTagName("Sport")[B].childNodes[a+3];txt=x.nodeValue;document.write(txt);document.write("</td>");document.write("<td>");x=xmlDoc.getElementsByTagName("Sport")[B].childNodes[a+4];txt=x.nodeValue;document.write(txt);document.write("</td>");document.write("</tr>");document.write("</table>");//end table for data display

and my xml

<?xml version="1.0" encoding="utf-8"?><Events>	<Sport type="BasketBall">	<SportName> BasketBall</SportName>						<Date Game="1">			testing			</Date>						<Time Game="1">			testing			</Time>						<Where Game="1">			testing			</Where>						<Vrs Game="1" >			testing			</Vrs>						</Sport><Sport type="Soccer">	<SportName> Soccer</SportName>					<Date Game="1">						</Date>						<Time Game="1">						</Time>						<Where Game="1">						</Where>						<Vrs Game="1" >			</Vrs>						</Sport>	<Sport type="footBall">		<SportName>FootBall</SportName>							<Date Game="1">						</Date>						<Time Game="1">						</Time>						<Where>						</Where Game="1">						<Vrs Game="1">			</Vrs>						</Sport>	<Sport type="DramaProductions">		<SportName> DramaProductions</SportName>					<Date Game="1">						</Date Game="1">						<Time Game="1">						</Time>						<Where Game="1">						</Where>				</Sport></Events>