格式JQuery的結果爲HTML表

Question

你好我解析之內我的網頁XML文件通過XML，像這樣：

function loadCards(lang) 
{ 
    $.ajax({ 
     type: "GET", 
     url: 'data.xml', 
     dataType: "xml", 
     success: function (xml) { parseDataXml(xml, lang); } 
    }); 
} 

function parseDataXml(xml, lang) 
{ 
    var $xml = $(xml), 
     name = $xml.find('name[lang="' + lang + '"]').text(), 
     start = $xml.find('start[lang="' + lang + '"]').text(); 
     end = $xml.find('end[lang="' + lang + '"]').text(); 
} 

我的XML文件看起來像這樣：

<student id = 1> 
    <bob> 
     <name>English</name> 
     <start>9.00am</start> 
     <end>11.00am</end> 
    </bob> 
</student> 

我有一個HTML表格，格式化爲具有5個表格標題的時間表格，以及5個學生表格行。基本上我的問題是，如何將結果從我的JQuery解析格式化到表中，以便爲JQuery/XML提供結構化視圖。我發現很難將解析結果實現到我的表中。

Answer 1

因爲我相信你的XML是沒有意義的，我重寫，並展示瞭如何用它來建立一個表：

<students> 
    <student id="1" name="Bob"> 
     <class name="English" days="MWF" start="9:00am" end="11:00am"/> 
     <class name="History" days="MWF" start="1:00pm" end="3:00pm"/> 
     <class name="Math" days="TT" start="9:00am" end="12:00pm"/> 
    </student> 
    <student id="2" name="Sally"> 
     <class name="Algebra" days="MWF" start="9:00am" end="11:00am"/> 
     <class name="Political Science" days="MWF" start="1:00pm" end="3:00pm"/> 
    </student> 
    <student id="3" name="Jim"> 
     <class name="Spanish" days="MWF" start="9:00am" end="11:00am"/> 
     <class name="Calculus" days="MWF" start="1:00pm" end="3:00pm"/> 
     <class name="History" days="TT" start="9:00am" end="1:00pm"/> 
    </student> 
    <student id="4" name="Erin"> 
     <class name="AP English" days="F" start="9:00am" end="3:00pm"/> 
    </student> 
</students> 

注意第一var僅僅是獲得一個XML源（見搗鼓詳細信息）：

var $xml = $($('#xml').text()), 
    $table = $('<table>'), 
    $rows = $('<tbody>'); 

$xml.find('student class').each(function ea(){ 
    var $class = $(this), 
     $student = $class.closest('student'); 

    $rows.append(
     '<tr>' + 
     ' <td>' + $student.attr('id') + '</td>' + 
     ' <td>' + $student.attr('name') + '</td>' + 
     ' <td>' + $class.attr('name') + '</td>' + 
     ' <td>' + $class.attr('days') + '</td>' + 
     ' <td>' + $class.attr('start') + '</td>' + 
     ' <td>' + $class.attr('end') + '</td>' + 
     '</tr>' 
    ); 
}); 

$table 
    .append(
     '<thead>' + 
     ' <tr>' + 
     ' <th>ID</th>' + 
     ' <th>Name</th>' + 
     ' <th>Class</th>' + 
     ' <th>Days</th>' + 
     ' <th>Start</th>' + 
     ' <th>End</th>' + 
     ' </tr>' + 
     '</thead>' 
    ) 
    .append($rows) 
    .appendTo('body'); 

給我們：

ID Name Class    Days Start End 
---------------------------------------------------- 
1 Bob English   MWF 9:00am 11:00am 
1 Bob History   MWF 1:00pm 3:00pm 
1 Bob Math    TT 9:00am 12:00pm 
2 Sally Algebra   MWF 9:00am 11:00am 
2 Sally Political Science MWF 1:00pm 3:00pm 
3 Jim Spanish   MWF 9:00am 11:00am 
3 Jim Calculus   MWF 1:00pm 3:00pm 
3 Jim History   TT 9:00am 1:00pm 
4 Erin AP English   F  9:00am 3:00pm 

http://jsfiddle.net/xpEWx/2