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!