Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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++;    
      }

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 08-07-2012 at 02:21 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 View Post

    Code:
    var tblContent = '';
    
    tblContent += // etc..;
    
    tblContent = tblContent.substring(0, tblContent.length-5) + '</table>';
    but this is untested.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what i've in the html.

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

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by sunsin View Post
    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>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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>";
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •