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! :D

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. :)