Convert HTML table into XML using JavaScript or JQuery

Question

I have this dynamically created HTML table and I’m looking to convert it into XML(see below xml output)

 <table id="GridView1">
 <tr>
    <th>Class</th>
    <th>1995</th>
    <th>1996</th>
    <th>1997</th>
 </tr>
 <tr>
    <td>Class1</td>
    <td>
        <select name="ddlStatus"">
           <option value="Phase I">Phase I</option>
           <option selected="selected" value="Phase II">Phase II</option>
           <option value="Phase III">Phase III</option>
        </select>
    </td>
    <td>
        <select name="ddlStatus">
           <option value="Phase I">Phase I</option>
           <option selected="selected" value="Phase II">Phase II</option>
           <option value="Phase III">Phase III</option>
        </select>
    </td>
    <td>
        <select name="ddlStatus">
           <option value="Phase I">Phase I</option>
           <option value="Phase II">Phase II</option>
           <option selected="selected" value="Phase III">Phase III</option>
        </select>
    </td>
 </tr>
 <tr>
   <td>Class2</td>
   <td>
        <select name="ddlStatus"">
               <option value="Phase I">Phase I</option>
               <option value="Phase II">Phase II</option>
           <option selected="selected" value="Phase III">Phase III</option>
        </select>
   </td>
   <td>
        <select name="ddlStatus">
               <option value="Phase I">Phase I</option>
               <option selected="selected" value="Phase II">Phase II</option>
           <option value="Phase III">Phase III</option>
        </select>
   </td>
   <td>
        <select name="ddlStatus">
           <option value="Phase I">Phase I</option>
           <option value="Phase II">Phase II</option>
           <option selected="selected" value="Phase III">Phase III</option>
        </select>
   </td>
 </tr>
 </table>

This is the function I’m working on, and I need some help to parse out the dropdown box selected item

var xml = '<?xml version="1.0" encoding="utf-8"?>';
xml = xml + '<Root><Classes>';

$("#<%=Me.GridView1.ClientID %> tr").each(function () {
var cells = $("td", this);
    if (cells.length > 0) {
        xml += "<Class Name='" + cells.eq(0).text() + "'>";

        for (var i = 1; i < cells.length; ++i) {
             xml += '<Data year="' + $("#GridView1").find("th").eq(i).text()  + '" status="' + $("option:selected",cells.eq(i)).text() + '"/>';
        }

        xml += "</Class>";
     }
});

xml = xml + '</Classes></Root>'

And this is how I would like the XML output to look like after parsing.

<?xml version="1.0" encoding="utf-8"?>
 <Root>
  <Classes>
    <Class Name="Class1">
       <Data Year="1995" Status="Phase II" />
       <Data Year="1996" Status="Phase II" />
       <Data Year="1997" Status="Phase III" />
     </Class >
     <Class Name="Class2">
       <Data Year="1995" Status="Phase III" />
       <Data Year="1996" Status="Phase II" />
       <Data Year="1997" Status="Phase III" />
     </Class >
   </ Classes >
 </Root>

The above jquery function works now. If anybody can come up with nice JavaScript example, will be greatly appreciate it.

Thanks

Answer 1

Try this inside your for loop

xml += '<Data year="' + $("#GridView1").find("th").eq(i).text()  + '" status="' + $("option[selected]",cells.eq(i)).text() + '"/>';

DEMO