from xml to html table using jquery/ajax

ware4me

New Member
I want to transform an xml document into an HTML table using jquery/ajax. Additionally I want to add a class to the \[code\]tr\[/code\] if a condition is met. This is what I've done so far, but it doesn't work as intended: 1) the HTML table output has more \[code\]tr\[/code\] and \[code\]td\[/code\] than it should have and 2) the conditional classes for the tr (\[code\].no-kids\[/code\]) aren't working.Any help would be appriciated!JQUERY/AJAX CODE:\[code\]$(document).ready(function(){ $.ajax({ type: "GET", url: "database.xml", dataType: "xml", success: function(xmlData) { $("person", xmlData).each(function(){ var name = $(this).find("name").text(), kids = $(this).find("kids").text(), cars = $(this).find("cars").text(); if(kids<1){ $("tbody").append('<tr class="no-kids">'); }else{ $("tbody").append('<tr>'); } $("tbody tr").append('<td class="name">'+name+'</td>'); $("tbody tr").append('<td class="kids">'+kids+'</td>'); $("tbody tr").append('<td class="cars">'+cars+'</td>'); $("tbody").append('</tr>'); }); } }); $(".no-kids").css("color","red");});\[/code\]HTML CODE:\[code\]<table> <thead> <tr> <th>NAME</th> <th>KIDS</th> <th>CARS</th> </tr> </thead> <tbody> </tbody> </table>\[/code\]DATABASE.XML CODE:\[code\]<root> <person> <name>Matt</name> <kids>3</kids> <cars>1</cars> </person> <person> <name>Jason</name> <kids>0</kids> <cars>2</cars> </person> <person> <name>Molly</name> <kids>1</kids> <cars>0</cars> </person></root>\[/code\]
 
Back
Top