Geek Answers Handbook

JQuery: parse XML with inconsistent row data in a table

This is probably a very newbie, but I'm at a standstill.

I have the following code that parses an XML file and places each element in a table. My problem is that there are not always nine elements in each line, and the names of each element change between XML files. Is there a way to create a loop that goes through each row (without knowing the element name ( col0 , col1 , etc.)) and put it in a table?

XML is as follows:

 <row> <Col0>titles</Col0> <Col1>more titles</Col1> <Col2>title</Col2> <Col3>name</Col3> <Col4>another name</Col4> <Col5>different name</Col5> <Col6></Col6> <Col7></Col7> <Col8></Col8> </row> <row> <Col0>5:58</Col0> <Col1>-</Col1> <Col2>6:08</Col2> <Col3>6:11</Col3> <Col4>6:15</Col4> <Col5>6:19</Col5> <Col6></Col6> <Col7></Col7> <Col8></Col8> </row>

etc....

Here is my code:

 <script type="text/javascript"> $(document).ready(function() { $.get('newlayout.xml', function(d){ $('.tabl').append('<table>'); $(d).find('row').each(function(){ var $row = $(this); var col01 = $row.find('Col0').text(); var col02 = $row.find('Col1').text(); var col03 = $row.find('Col2').text(); var col04 = $row.find('Col3').text(); var col05 = $row.find('Col4').text(); var col06 = $row.find('Col5').text(); var col07 = $row.find('Col6').text(); var col08 = $row.find('Col7').text(); var col09 = $row.find('Col8').text(); html = '<tr>' html += '<td style="width:80px"> ' + col01 + '</td>'; html += '<td style="width:80px"> ' + col02 + '</td>' ; html += '<td style="width:80px"> ' + col03 + '</td>' ; html += '<td style="width:80px"> ' + col04 + '</td>' ; html += '<td style="width:80px"> ' + col05 + '</td>' ; html += '<td style="width:80px"> ' + col06 + '</td>' ; html += '<td style="width:80px"> ' + col07 + '</td>' ; html += '<td style="width:80px"> ' + col08 + '</td>' ; html += '<td style="width:80px"> ' + col09 + '</td>' ; html += '</tr>'; $('.tabl').append($(html)); }); }); });

Thanks in advance,
Tom

+4
source share
3 answers

try the following:

 $('row').each(function(){ var $row = $(this); $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td'))); })

Working example in jsFiddle.

I think you can follow what is happening here. If not, ask away. This is basically the problem of understanding the various jQuery functions, and api.jquery.com is not happening for this

edit: This version gets rid of empty cells by selecting only those cells that are the parents of something (i.e. not empty):

 $('row').each(function(){ var $row = $(this); $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td:parent'))); })
+6
source 
 $(d).find('row').each(function() { var $row = $(this); html = '<tr>'; var i = 0; while (true) { if ($.trim((colX = $row.find('Col' + i).text())) !== '') { html += '<td style="width:80px"> ' + colX + '</td>'; i++; } else { break; } } html += '</tr>'; $('.tabl').append($(html)); });
0
source

If you want to have only columns for fields with a name in the first row, this will work for you:

http://jsfiddle.net/entropo/ffyDT/

 $('row').each(function() { var $row = $(this), fieldcount = fieldcount || 0, afterfirst; if (! afterfirst) { fieldcount = $row.find(':not(:empty)').length; afterfirst = 1; } $('.tabl').append($('<tr />').append($row.children(':lt('+fieldcount+')') .wrapInner('<td />').find('td'))); });
0
source

More articles:


All Articles