brucemand Posted July 26, 2011 Share Posted July 26, 2011 i can't seem to figure out how to display the XML file into HTML the right way.here's the XML itself; <wholelist><item> A <title>Alpha <subtit>Dog <rank>1 </rank> <pict>A1.png </pict> </subtit> <subtit>Male <rank>2 </rank> <pict>A2.png </pict> </subtit> </title> <comment>Lorem ipsum blah blah blah. </comment></item><item> B <title>Beta <subtit>Karotene <rank>1 </rank> <pict>B1.png </pict> </subtit> <subtit>Blocker <rank>2 </rank> <pict>B2.png </pict> </subtit> </title> <comment>Lorem ipsum blah blah blah. </comment></item><item> C <title>Charlie <subtit>Angel <rank>1 </rank> <pict>C1.png </pict> </subtit> <subtit>Brown <rank>2 </rank> <pict>C2.png </pict> </subtit> <subtit>Bigtime <rank>3 </rank> <pict>C3.png </pict> </subtit> </title> <comment>Lorem ipsum blah blah blah. </comment></item><item> # <title> () <subtit> * <rank>1 </rank> <pict>1.png </pict> </subtit> <subtit> ** <rank>2 </rank> <pict>2.png </pict> </subtit> <subtit> *** <rank>3 </rank> <pict>3.png </pict> </subtit> </title> <comment>awaiting new items for the lorem ipsum and the blah-blah... </comment></item></wholelist> and the script to read that file is; <html><body><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","file.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; // *this* is the "soup' document.write("<table border='1'>");var x=xmlDoc.getElementsByTagName("item");for (i=0;i<x.length;i++) { var y=x[i].getElementsByTagName("subtit"); document.write("<tr><td width='100' rowspan='"+y.length+"'>"); // thisOK-DON'Tchg! document.write("<b>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</b></td>"); document.write("<td style='background-color:yellow'>"); // only the FIRST subtit for (j=0;j<y.length;j++) { var z1=y[j].getElementsByTagName("rank"); document.write(+z1[0].childNodes[0].nodeValue+") "); var subtit=y[j].childNodes[0].nodeValue; var z2=y[j].getElementsByTagName("pict"); document.write("<img width='100' src="+z2[0].childNodes[0].nodeValue+"'>"); document.write("</td></tr><tr><td>"); // this is the subtit, has to be new row } document.write("</td><td rowspan='"+y.length+"'>"); document.write(x[i].getElementsByTagName("comment")[0].childNodes[0].nodeValue); document.write("</td></tr>"); }document.write("</table>");</script></body></html> as it stands the <comment> gets pushed into the following <title>, whereas i want it to be on the same row as the previous <title>it should look like; <table><tr><td rowspan="2/3/depending on SUBTIT.length"> TITLE</td> <td> <tr><td>SUBTIT <img src=...></td> </tr> <tr><td>SUBTIT<img src=...></td> </tr> <tr><td>SUBTIT<img src=...></td> </tr> </td> <td>Comments (for all three SUBTIT) </td></tr><tr>...continues ......as above... one <tr> set for each TITLE</tr></table>can anybody give tips on how this should be tackled, it's a bit messy but am doing this from scratch and probably not in an efficient way. Link to comment Share on other sites More sharing options...
brucemand Posted August 4, 2011 Author Share Posted August 4, 2011 nobody has any tips how i should approach this ?? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.