jQuery convert HTML Table to XML

I am retrieving HTML from a remote host with the following jQuery code

    var loadUrl = "URL.html"; 
        $("#result")
        .html(ajax_load)
        .load(loadUrl + " table.schedule");

Which gives me the following HTML

<table class="schedule">
        <tr>
                <th>Name</th>
                <th>column A</th>
                <th>column B</th>
        </tr>
        <tr>
                <td>1</td>
                <td>A1</td>
                <td>B1</td>
        </tr>
        <tr>
        <tr>
                <td>2</td>
                <td>A2</td>
                <td>B2</td>
        </tr>
</table>
<table class="schedule">
        <tr>
                <th>Name</th>
                <th>column C</th>
                <th>column D</th>
        </tr>
        <tr>
                <td>3</td>
                <td>C1</td>
                <td>D1</td>
        </tr>
        <tr>
        <tr>
                <td>4</td>
                <td>C2</td>
                <td>D2</td>
        </tr>
</table>

The number of TR & TDs can change, and I want to retrieve the data for column A,B,C,D and "transform" the HTML into a list format like the following XML.

<schedule name="1">
        <data>A1</data>
        <data>A2</data>
</schedule>
<schedule name="2">
        <data>B1</data>
        <data>B2</data>
</schedule>
<schedule name="3">
        <data>C1</data>
        <data>C2</data>
</schedule>
<schedule name="4">
        <data>D1</data>
        <data>D2</data>
</schedule>

I have tried the following code, which provides me with the first column data, but it also concatenates all the TDs from both Tables into one list.

$("#load_get").click(function(){
var xml = "<schedule>";
$("#result")
.find("tr").each(function() {
xml += "<data>";
xml += $(this).find("td").eq(1).html() + "\n";  
xml += "</data>";
} );
xml += "</schedule>";
alert(xml);
});

Please help.

EDIT

Thank you Polarblau, Federic & Albert for your responses. They helped a lot, sorry to change the goal, but if i could modify the scenario slightly.

This is the same HTML, except it has a header in the first TR, there are two tables and the first column is ignored as before.

<table class="schedule">
        <tr>
                <th>ignore</th>
                <th>Header1</th>
                <th>header2</th>
        </tr>
        <tr>
                <td>ignore</td>
                <td>A1</td>
                <td>B1</td>
        </tr>
        <tr>
                <td>ignore</td>
                <td>A2</td>
                <td>B2</td>
        </tr>
</table>

//second table

The XML i wish to have, needs to grab the开发者_如何转开发 Header(TH) and use it in the TD loop to set the name attribute, like so.

<schedule name="Header1">
        <data>A1</data>
        <data>A2</data>
</schedule>
<schedule name="Header2">
        <data>B1</data>
        <data>B2</data>
</schedule>

//second table xml

I tried unsuccessfully, to modify your solutions to achieve this.

Try this:

$(function(){
    var xml = "";
    $('tr:not(:first)').each(function(i, tr){
        $tr = $(tr);
        var index = $.trim($tr.find('td:first').text());
        xml += '<schedule name="'+index+'">';
        $tr.find('td:not(:first)').each(function(j, td){
            xml += '<data>';
            xml += $.trim($(td).text());
            xml += '</data>';
        });
        xml += '</schedule>';
    });
    alert(xml);
});

Example here.

If you'd be using <thead> and <tbody> you could still simplify it slightly further.

If I understand your question correctly, you need to create the <schedule> elements inside your loop:

$("#load_get").click(function() {
    var xml = "";
    $("#result tr").each(function() {
        var cells = $("td", this);
        if (cells.length > 0) {
            xml += "<schedule name='" + cells.eq(0).text() + "'>\n";
            for (var i = 1; i < cells.length; ++i) {
                xml += "\t<data>" + cells.eq(i).text() + "</data>\n";
            }
            xml += "</schedule>\n";
        }
    });
    window.alert(xml);
});

Instead of concatenating strings I would create a jQuery object

var $xml = $("<schedules>");
$("tr:has(>td)").each(function() {
    var $schedule = $("<schedule>");
    $xml.append($schedule);

    $("td", this).each(function(i) {
        if(i===0)
            $schedule.attr("name", $(this).text());
        else
            $schedule.append($("<data>").text($(this).text()));
    })
});

alert($xml.html());

Using this way easy html table convert into xml:--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<?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>

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

$("#GridView1 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) {
                
                //Need to parse out selected item in dropdown box
                xml += '<Data year="' + $("#GridView1").find("th").eq(i).text()  + '" status="' + $("option[selected]",cells.eq(i)).text() + '"/>';
        }

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

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

console.log(xml);
alert(xml);
</script>