Post
Ask Question

Exporting HTML Table To XML File Using jQuery

In this blog, we will see how to export an HTML table to XML using "tabletoxml" jQuery plugin.

First, we will create an HTML table showing employee details and an "Export to XML" button.
  1.  <div>  
  2.     <table id="mytable" cellpadding="5" border="1" cellspacing="0">  
  3.         <thead>  
  4.             <tr>  
  5.                 <th>  
  6.                     Employee Name  
  7.                 </th>  
  8.                 <th>  
  9.                     Age  
  10.                 </th>  
  11.                 <th>  
  12.                     Designation  
  13.                 </th>  
  14.                 <th>  
  15.                     Experience  
  16.                 </th>  
  17.             </tr>  
  18.         </thead>  
  19.         <tbody>  
  20.             <tr>  
  21.                 <td>  
  22.                     Rajeev  
  23.                 </td>  
  24.                 <td>  
  25.                     31  
  26.                 </td>  
  27.                 <td>  
  28.                     Developer  
  29.                 </td>  
  30.                 <td>  
  31.                     6  
  32.                 </td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <td>  
  36.                     Sandhya  
  37.                 </td>  
  38.                 <td>  
  39.                     27  
  40.                 </td>  
  41.                 <td>  
  42.                     Tester  
  43.                 </td>  
  44.                 <td>  
  45.                     2  
  46.                 </td>  
  47.             </tr>  
  48.             <tr>  
  49.                 <td>  
  50.                     Ramesh  
  51.                 </td>  
  52.                 <td>  
  53.                     25  
  54.                 </td>  
  55.                 <td>  
  56.                     Designer  
  57.                 </td>  
  58.                 <td>  
  59.                     1  
  60.                 </td>  
  61.             </tr>  
  62.             <tr>  
  63.                 <td>  
  64.                     Sanjay  
  65.                 </td>  
  66.                 <td>  
  67.                     32  
  68.                 </td>  
  69.                 <td>  
  70.                     Developer  
  71.                 </td>  
  72.                 <td>  
  73.                     5  
  74.                 </td>  
  75.             </tr>  
  76.             <tr>  
  77.                 <td>  
  78.                     Ramya  
  79.                 </td>  
  80.                 <td>  
  81.                     23  
  82.                 </td>  
  83.                 <td>  
  84.                     Developer  
  85.                 </td>  
  86.                 <td>  
  87.                     1  
  88.                 </td>  
  89.             </tr>  
  90.         </tbody>  
  91.     </table>  
  92.     <br />  
  93.     <button onclick="exporttoxml()">  
  94.         Export to XML</button>  
  95. </div>  
Running the page will look like below.

Now, we reference the jQuery file and "tabletoxml" file in our head section.
  1.  <title>Table 2 XML</title>  
  2. <script src="jquery.min.1.11.1.js" type="text/javascript"></script>  
  3. <script src="jquery.tabletoxml.js" type="text/javascript"></script>  
Now, we write our exporttoxml() function.
  1. <script type="text/javascript">  
  2.         function exporttoxml() {  
  3.             $("#mytable").tabletoxml({  
  4.                 rootnode: "Employee",  
  5.                 childnode: "EmployeeDetails",  
  6.                 filename: 'EmployeeList'  
  7.             });  
  8.         }  
  9. </script>  
In the above script, "filename" is the name given to the downloading XML file.

"rootnode" will be the name of the root node of our XML file. "childnode" will be the name of child node in the XML file corresponding to each row of our HTML table.

So now, we will run the page and click on "Export to XML" button. Our XML file will be downloaded. Opening that file, we can see the data of our table like below.

That's it. Our HTML table is exported to XML!

Please note that the above plugin is not tested in all versions of  IE browser and will not work on IE9 and below browsers. Also, there may be issues with huge HTML tables too.

Summary

In this blog, we have learned how to export an HTML table to XML file using the "tabletoxml" jQuery plugin. I hope this will be helpful!