CodingForums.com - xml data in a columns & row not just columns

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - xml data in a columns & row not just columns (http://www.codingforums.com/showthread.php?t=269748)

sunsin

08-07-2012 08:04 AM

xml data in a columns & row not just columns

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 (Post 1258534)

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 (Post 1258610)

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>";

All times are GMT +1. The time now is 10:57 AM.