jQuery convert HTML Table to XML

Question

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

    var loadUrl = \"URL.html\"; 
        $(\"#result\")
        .html(ajax_load)
        .load(         


        

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

Answer 2

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

Answer 3

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>

Answer 4

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.