How To Create Table In Xml Using Css

In this article, I have provided code for how we can read XML file using jQuery and then load it in HTML table, to show it in tabular form.

Suppose this is our sample XML file, which we would like to read

          <?xml version="1.0"?> <catalog>    <book>       <author>Gambardella, Matthew</author>       <title>XML Developer's Guide</title>       <genre>Computer</genre>       <price>44.95</price>       <description>An in-depth look at creating applications        with XML.</description>    </book>    <book>       <author>Ralls, Kim</author>       <title>Midnight Rain</title>       <genre>Fantasy</genre>       <price>5.95</price>       <description>A former architect battles corporate zombies,        an evil sorceress, and her own childhood to become queen        of the world.</description>    </book>    <book>       <author>Corets, Eva</author>       <title>Maeve Ascendant</title>       <genre>Fantasy</genre>       <price>5.95</price>       <description>After the collapse of a nanotechnology        society in England, the young survivors lay the        foundation for a new society.</description>    </book>    <book>       <author>Corets, Eva</author>       <title>Oberon's Legacy</title>       <genre>Fantasy</genre>       <price>5.95</price>       <description>In post-apocalypse England, the mysterious        agent known only as Oberon helps to create a new life        for the inhabitants of London. Sequel to Maeve        Ascendant.</description>    </book>    <book>       <author>Corets, Eva</author>       <title>The Sundered Grail</title>       <genre>Fantasy</genre>       <price>5.95</price>       <description>The two daughters of Maeve, half-sisters,        battle one another for control of England. Sequel to        Oberon's Legacy.</description>    </book> </catalog>

You can also find above XML file at the given URL: https://qawithexperts.com/book.xml

Now, we would need to write HTML and jQuery code to parse XML and load data in HTML table as content.

          <!DOCTYPE html> <html> <head>     <title>Read XML Data Using jQuery Ajax and Load it in HTML table</title>     <!--Include Bootstrap CSS-->     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">       <!--Include jQuery-->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>     <style>              </style> </head>  <body>      <p>       Click button to Read XML and Show it in HTML     </p>      <input type="button" value="Read XML" id="btn" />     <table class="table table-condensed table-hovered table-striped">       <thead>         <tr>           <th>Author</th>           <th>Title</th>           <th>Genre</th>           <th>Price</th>           <th>Description</th>         </tr>       </thead>       <tbody id="tableBody">                </tbody>          </table> </body>  <script>     $(document).ready(function() {         //jQuery on button click Call         $('#btn').click(function () {                      $('#tableBody').empty();       // Clear the table body.             //ajax call to load XML and parse it             $.ajax({                 type: 'GET',                 url: 'https://res.cloudinary.com/dmsxwwfb5/raw/upload/v1591716537/book.xml',           // The file path.                 dataType: 'xml',                     success: function(xml) {                    //find all book tags, loop them and append to table body                     $(xml).find('book').each(function() {                                                  // Append new data to the tbody element.                         $('#tableBody').append(                             '<tr>' +                                 '<td>' +                                     $(this).find('author').text() + '</td> ' +                                 '<td>' +                                     $(this).find('title').text() + '</td> ' +                                 '<td>' +                                     $(this).find('genre').text() + '</td> ' +                                     '<td>' +                                     $(this).find('price').text() + '</td> ' +                                     '<td>' +                                     $(this).find('description').text() + '</td> ' +                             '</tr>');                     });                 }             });         });     }); </script> </html>

In the above code, we are loading XML file from URL using jQuery Ajax.

Once the request is successful, we are looping the <book> tag of above XML, then extracting data from each tag inside it using .find('tagname').text(), and appending the text in table row using <tr>, <td>.

Here is the working fiddle sample.

That's it, we are done, here is the gif sample

/read-xml-using-jquery-ajax-load-in-html-table-min.gif

You may also like to read:

Email validation using jQuery (Various Methods)

Creating sticky header on scroll using CSS