jQuery convert HTML Table to XML
Solution 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);
});
Solution 2
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);
});
If you'd be using <thead>
and <tbody>
you could still simplify it slightly further.
Related videos on Youtube
SydneyAu
Updated on June 04, 2022Comments
-
SydneyAu about 2 years
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.