unknown xml display in html table

unknown xml display in html table

I am trying to read from an xml file where I won't know the names of tags, but I will know the root element, which will contain <rows>, something like this:

  1. <?xml version="1.0" encoding="UTF-8"?>
    <data>
    <row>
        <nai>23</nai>
        <source>it</source>
        <size>big</size>
        <activity>rolling</activity>
        <location>here</location>
        <unit>cm</unit>
        <time>now</time>
        <equipment>red truck</equipment>
        <remarks>none</remarks>
    </row>

    <row>
        <nai>24</nai>
        <source>him</source>
        <size>medium</size>
        <activity>sitting</activity>
        <location>there</location>
        <unit>ft</unit>
        <time>then</time>
        <equipment>couch</equipment>
        <remarks>no</remarks>
    </row>

    <row>
        <nai>25</nai>
        <source>she</source>
        <size>very small</size>
        <activity>can't see</activity>
        <location>everywhere</location>
        <unit>K</unit>
        <time>today</time>
        <equipment>none</equipment>
        <remarks>nope</remarks>
    </row>

    </data>





































I would like to display the results in an html table, where the first row is all <th> with the tag names, then subsequent rows are the text from tags in each row. However I can't seem to access just the first row to create the headings. Here is where I am currently:


  1. <!DOCTYPE html>

    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">       
       
        <title>ajax() Query results</title>
       
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
        <script>
             $(document).ready(function(){
               $.ajax({
                   type:'get',
                   url:'madsat-data.xml',
                   beforeSend: function(){$('#results').html('<img src="ajax-loader.gif"><br>Loading...'); },
                   timeout: 10000,
                   error: function(xhr, status, error){
                    alert("Error: " + xhr.status + " - " + error)
                   },
                   dataType: "xml",
                   success: function(data){
                   
                   var html = '<h3>Query Results</h3>';
                   html += '<table><tbody><tr>';
                   $(data).find('row').children().each(function() {
                  
                   var row = $(this);
                   html += '<th>' + row.get(0).tagName + '</th>'
                  
                  
                   });
                html += '</tr>';
               
                html+='</tbody><table>'
            $('#results').html(html); // Add to DOM
           
                   
                   }
               
       
               
                                 
               });
              
            });
        </script>
       
        </head>
       
       
        <body>
            <div id="results"></div>
           
           
        </body>
    </html>

























































This produces all of the names for all the rows. I thought I could isolate the first row with something like:

  1. $(data).find('row'[0]).children().each(function()

but I was wrong about that.  Any help would be most appreciated. Thanks.