Column Wrapping?

[mattan138]

Hello, I'm having some trouble.

I am making a request to an XML file that has six items within it.

Requesting and putting the information on the page is easy enough, I just can't get it to format the way I want.

Right now, it outputs like this:

<table>
	<tr>
		<td onclick="displayMovieInfo(0)">Forbidden Planet (1956)</td>
		<td onclick="displayMovieInfo(1)">The Exorcist (1973)</td>
		<td onclick="displayMovieInfo(2)">The Day the Earth Stood Still (1951)</td>
		<td onclick="displayMovieInfo(3)">Rec (2007)</td>
		<td onclick="displayMovieInfo(4)">Dawn of the Dead (1978)</td>
		<td onclick="displayMovieInfo(5)">Black Christmas (1974)</td>
	</tr>
</table>

But I want it to output something more like this:

<table>
	<tr>
		<td onclick="displayMovieInfo(0)">Forbidden Planet (1956)</td>
		<td onclick="displayMovieInfo(1)">The Exorcist (1973)</td>
	</tr>
	<tr>
		<td onclick="displayMovieInfo(2)">The Day the Earth Stood Still (1951)</td>
		<td onclick="displayMovieInfo(3)">Rec (2007)</td>
	</tr>
	<tr>
		<td onclick="displayMovieInfo(4)">Dawn of the Dead (1978)</td>
		<td onclick="displayMovieInfo(5)">Black Christmas (1974)</td>
	</tr>
</table>

Here is the JavaScript I'm using:

<script type="text/javascript">

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","movie_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("MOVIE");

function displayMovieInfo(i)
{
	title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
	year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
	format=(x[i].getElementsByTagName("FORMAT")[0].childNodes[0].nodeValue);
	txt="Title: "+title+"<br />Year: "+year+"<br />Format: "+format  ;
	document.getElementById("showMovie").innerHTML=txt;
}

document.write("<table border='1'><tr>");
for (var i=0; i < x.length; i++)
{
	document.write("<td onclick='displayMovieInfo(" + i + ")'>");
	document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
	document.write(" (" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + ")");
	document.write("</td>");
		
}
document.write("</tr></table>");
</script>

I know something has to go after:
for (var i=0; i < x.length; i++) {
to check when it reaches whatever column limit I wish to set; in the example output, 2.

But everything I've tried hasn't worked, I'm a real noob when it comes to JavaScript, so I was hoping some of you fine people could help me out.

And word on it would be greatly appreciated.

[jscheuer1]

function displayMovieInfo(i) // moved outside of self executing function because current code requires it in the global scope
{
	var title = (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue), // formally declare  title, year, format, and txt as variables
	year = (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue),
	format = (x[i].getElementsByTagName("FORMAT")[0].childNodes[0].nodeValue),
	txt = "Title: " + title + "<br />Year: " + year + "<br />Format: " + format;
	document.getElementById("showMovie").innerHTML = txt;
}

(function(){ // with last line wraps code in a self executing function to protect its variables
	var xmlhttp = null; // formally declare xmlhttp as a variable
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		try // use try catch here to avoid error in browsers where this isn't supported
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e)
		{
			xmlhttp = null;
		}
	}
	if(!xmlhttp) // if no xmlhttp
	{
		return; // stop processing
	}
	xmlhttp.open("GET","movie_catalog.xml",false);
	xmlhttp.send();
	var xmlDoc = xmlhttp.responseXML; // formally declare xmlDoc as a variable
	var x = xmlDoc.getElementsByTagName("MOVIE"); // formally declare x as a variable
	
	document.write("<table border='1'>");
	for (var i = 0, c; i < x.length; ++i) // adds a formally declared variable c for later use in the loop
	{
		c = i % 2; // i modulo 2 - the remainder of i/2
		if(!c){document.write("<tr>");} // if c === 0
		document.write("<td onclick='displayMovieInfo(" + i + ")'>");
		document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
		document.write(" (" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + ")");
		document.write("</td>");
		if(c || !x[i + 1]){document.write("</tr>");} // if c === 1 or there are no more
	}
	document.write("</table>");
})(); // with (function(){ line wraps code in a self executing function to protect its variables

[mattan138]

You, sir, are amazing.

You did more than what I asked and that really helped too!

I managed to figure out how to make it do 3, 4, 5+ columns before it creates a new row with the code changes you made.

Thank you so much for your help.