<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-8"> <table class="table table-bordered"> <thead class="alert-info"> <tr> </tr> </thead> </table> </div> <div class="col-md-2"> </div> </div> </body> </html>
$(document).ready(function(){ $('#generate').on('click', function(){ var data = $.parseXML(xml); var $xml = $(data); var $user = $xml.find("user"); var content = ""; $user.each(function(){ var firstname = $(this).find('firstname').text(); var lastname = $(this).find('lastname').text(); content += "<tr>" + "<td>"+firstname+"</td>" + "<td>"+lastname+"</td>" + "</tr>"; $("#result" ).html(content); }); }); var xml = "<?xml version='1.0' ?>" + "<doc>" +" <user>" +" <firstname>Tony</firstname>" +" <lastname>Stark</lastname>" +" </user>" +" <user>" +" <firstname>Claire</firstname>" +" <lastname>Temple</lastname>" +" </user>" +" <user>" +" <firstname>John</firstname>" +" <lastname>Smith</lastname>" +" </user>" +"</doc>"; });