javascript - Getting XML to display in HTML -
i've been messing script online parse out xml display in table. unfortunately, unlike in examples i've seen around, mine isn't displaying table.
<html> <head> </head> <body> <script> if (window.xmlhttprequest) { xmlhttp = new xmlhttprequest(); } else { xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.open("get","europe.xml",false); xmlhttp.send(); xmldoc = xmlhttp.responsexml; document.write("<table border='1'>"); var x = xmldoc.getelementsbytagname("country"); (i = 0; < x.length; i++) { document.write("<tr><td>"); document.write(x[i].getelementsbytagname("name")[0].childnodes[0].nodevalue); document.write("</td><td>"); document.write(x[i].getelementsbytagname("users")[0].childnodes[0].nodevalue); document.write("</td></tr>"); } document.write("</table>"); </script> </body> </html> and europe.xml
<?xml version="1.0" ?> <continent name="europe"> <country> <name>albania</name> <users>1.6 million</users> </country> <country> <name>austria</name> <users>6.7 million</users> </country> <country> <name>belgium</name> <users>8.6 million</users> </country> </continent>
it's improve generate table in string , append generated html existing element using dom.
1) add together container html wish place table:
<html><body> ... <div id="container"></div> ... </body></html> 2) load xml file:
var client; if (window.xmlhttprequest) { client = new xmlhttprequest(); } else { client = new activexobject("microsoft.xmlhttp"); } client.open('get', 'europe.xml'); 3) read file contents. should done inside ajax callback function, assure file read before processing begins. test response code, etc.here example:
client.onreadystatechange = function() { // run when file loads // response xml var xmldoc = client.responsexml; // list of countries var countries = xmldoc.getelementsbytagname("country"); ... // rest of code (see below) } client.send(); // send request captured function above 4) list of <country> elements (this in code above):
var countries = xmldoc.getelementsbytagname("country"); 5) container div table added:
var container = document.getelementbyid("container"); 6) create html table in string , set element info within it:
var tablestring = "<table border='1'>"; // create table , set element info within (i = 0; < countries.length; i++) { tablestring += "<tr><td>"; tablestring += countries[i].getelementsbytagname("name")[0].childnodes[0].nodevalue; tablestring +="</td><td>"; tablestring += countries[i].getelementsbytagname("users")[0].childnodes[0].nodevalue; tablestring += "</td></tr>"; } tablestring += "</table>"; 7) append table container:
container.innerhtml = tablestring; this illustration uses pure javascript. might want seek solution using jquery cut down lines of code above half.
see http://jsfiddle.net/helderdarocha/n2ner/ illustration (i used embedded xml instead of ajax in fiddle, avoid loading external file)
update: here's entire html page, in case have problem assembling parts:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <script> var client; if (window.xmlhttprequest) { client = new xmlhttprequest(); } else { client = new activexobject("microsoft.xmlhttp"); } client.open('get', 'europe.xml'); client.onreadystatechange = function() { // run when file loads // response xml var xmldoc = client.responsexml; // list of countries var countries = xmldoc.getelementsbytagname("country"); // container want embed table var container = document.getelementbyid("container"); var tablestring = "<table border='1'>"; // create table , set element info within (i = 0; < countries.length; i++) { tablestring += "<tr><td>"; tablestring += countries[i].getelementsbytagname("name")[0].childnodes[0].nodevalue; tablestring +="</td><td>"; tablestring += countries[i].getelementsbytagname("users")[0].childnodes[0].nodevalue; tablestring += "</td></tr>"; } tablestring += "</table>"; // append table container container.innerhtml = tablestring; } client.send(); </script> </head> <body> <h1></h1> <div id="container"></div> </body> </html> javascript html ajax xml
No comments:
Post a Comment