xml data in a columns & row not just columns

sunsin · 08-07-2012, 08:04 AM

Hi,
I'm loading xml data in a table which is in a div. I want each item to load in it's own column with only 3 columns per row. I can get the data to load in it's own column but only one column per row. I can also get it to load only three items from the xml file and then goto the next line but then I can't get them to load in columns.

Please help.
Here is my code:

Code:

function displayDOMlist(){
document.getElementById("cat_title").innerHTML="<img src='img/beer_dom_tl.png'>";
  x=xmlDoc.getElementsByTagName("BEER");
  t=document.getElementById("beerlist");
  t.innerHTML="<tr>";
  mltple=1;
  for (i=0;i<x.length;i++){
    naam=(x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
    info=(x[i].getElementsByTagName("INFO")[0].childNodes[0].nodeValue);
    pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
	if (mltple % 3){
		t.innerHTML+="<td width='100'><a href="+pic+">"+naam+"</a></td>";		
    } else {
    t.innerHTML+=naam+"</tr><tr>";
    }
    mltple++;    
  }

AndrewGSW · 08-07-2012, 01:19 PM

I haven't looked at this in detail but assume you need:

Code:

} else {
    t.innerHTML += "<td>" + naam + "</td></tr><tr>";
}

But you also need to finish the table by removing the extra <tr>. Instead of inserting it directly as innerHTML, perhaps collect it in a string:

Code:

var tblContent = '';

tblContent += // etc..;

tblContent = tblContent.substring(0, tblContent.length-5) + '</table>';

but this is untested.

sunsin · 08-07-2012, 03:39 PM

Thanks AndrewGSW,

I added 't.innerHTML += "<td>" + naam + "</td></tr><tr>";' but its still not working. I'm relatively new to javascript (and/or html), I don't understand what you mean by the following.

Quote:

Originally Posted by AndrewGSW

Code:

var tblContent = '';

tblContent += // etc..;

tblContent = tblContent.substring(0, tblContent.length-5) + '</table>';

but this is untested.

AndrewGSW · 08-07-2012, 04:08 PM

Your current code ends up with an additional opening tr tag at the end, which might be causing the whole thing to collapse into one column. My code should remove this extraneous opening tag.

I've revised it here as I assume there is already a closing table tag somewhere.

Code:

var tblContent = '';

tblContent += // etc..;

tblContent = tblContent.substring(0, tblContent.length-5);

But this might not be the problem; you may just be inserting the content in the wrong place.

sunsin · 08-07-2012, 04:39 PM

This is what i've in the html.

Code:

<table id="beerlist" border='1'></table>

AndrewGSW · 08-07-2012, 04:42 PM

Quote:

Originally Posted by sunsin

This is what i've in the html.

Code:

<table id="beerlist" border='1'></table>

That's fine, but I would put at least a word in there as a placeholder:

Code:

<table id="beerlist" border='1'>beers</table>

AndrewGSW · 08-07-2012, 04:59 PM

You also need to ensure the href is quoted within the HTML:

Code:

t.innerHTML+="<td width='100'><a href='"+pic+"'>"+naam+"</a></td>";
// OR
t.innerHTML+="<td width='100'><a href=\""+pic+"\">"+naam+"</a></td>";