从xml到html表使用jQuery/ajax

Question

我想要使用jQuery/ajax将XML文档转换成HTML表。另外，如果满足条件，我想添加一个类到tr。这是我迄今为止所做的工作，但它不能按预期工作：1）HTML表输出比它应该有更多的tr和td以及2）tr的条件类（.no-kids）不起作用。 任何帮助将appriciated！

JQUERY/Ajax代码：

$(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"); 
}); 

HTML代码：

<table> 
    <thead> 
     <tr> 
      <th>NAME</th> 
      <th>KIDS</th> 
      <th>CARS</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

DATABASE.XML 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> 

Answer 1

的jQuery只追加全要素，而不是开始/结束标记。

var output = '<tr' + parseInt(kids) < 1 ? ' class="no-kids">' : '>'; 
output += '<td class="name">'+name+'</td>'; 
output += '<td class="kids">'+kids+'</td>'; 
output += '<td class="cars">'+cars+'</td>'; 
output += '</tr>'; 
$("tbody").append(output); 

编辑：另外，您需要在成功回调中应用红色字体颜色。

} 
    }); 
    $(".no-kids").css("color","red"); 
}); 

应该

 $(".no-kids").css("color","red"); 
    } 
    }); 
});