Question

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.

Answer 1

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);
});