// Start function when DOM has completely loaded
$(document).ready(function(){
// Open the students.xml file
$.get("xml/CaledoniaInventory.xml",{},function(xml){
// Build an HTML string
myHTMLOutput = '';
myHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
myHTMLOutput += '<th>Year</th><th>Make</th><th>Model</th><th>Images</th>';
// Run the function for each student tag in the XML file
$('Unit',xml).each(function(i) {
rvYear = $(this).find("Year").text();
rvMake = $(this).find("Make").text();
rvModel = $(this).find("Model").text();
rvImages = $(this).find("Picture").text();
// Build row HTML data and store in string
mydata = BuildrvHTML(rvYear,rvMake,rvModel,rvImages);
myHTMLOutput = myHTMLOutput + mydata;
});
myHTMLOutput += '</table>';
// Update the DIV called Content Area with the HTML string
$("#ContentArea").append(myHTMLOutput);
});
});
function BuildrvHTML(rvYear,rvMake,rvModel,rvImages){
// Check to see if their is a "post" attribute in the name field
// Build HTML string and return
output = '';
output += '<tr>';
output += '<td>'+ rvYear + '</td>';
output += '<td>'+ rvMake +'</td>';
output += '<td>'+ rvModel +'</td>';
output += '<td>'+ rvImages +'</td>';
output += '</tr>';
return output;
}
This returns most of my information properly, however the pictures are one long string. I want to be able to show these as separate line items instead of one long string of url's.
Any help is appreciated, I am fairly new at jQuery and especially at parsing xml with it.