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