jQuery的每個（）和HTML（）的問題

Question

JS

function loadXml() { 

    $.ajax({ 
     type: 'get', 
     url: 'test.xml', 
     dataType: 'xml', 
     success: function(output) { 
      $(output).find('name').each(function() { 

    $('table > tbody').html('<tr><td>'+$(this).text()+'</td></tr>'); 

      }); 
     } 
    }); 

} 

HTML

<a href="javascript:void(0)" onClick="loadXml()">Click Me</a> 

<table border="1"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Occupation</th> 
     <th>Fav Show</th> 
    </tr> 
    </thead> 
    <tbody> 
     // 
    </tbody> 
</table> 

XML

<?xml version="1.0" encoding="UTF-8"?> 

<people> 
    <person> 
     <name>Sam Uber</name> 
     <age>22</age> 
     <occupation>Web Developer</occupation> 
     <favshow>Batman</favshow> 
    </person> 
    <person> 
     <name>Jenna Taylor</name> 
     <age>18</age> 
     <occupation>Model</occupation> 
     <favshow>Family Guy</favshow> 
    </person> 
</people> 

問題是，當我點擊鏈接它顯示的名字「 Sam Uber「就是這樣。而不是從表格內部的XML中顯示兩個名稱。我不知道爲什麼這是因爲代碼在each（）函數中。

更奇怪的是，當我提醒名稱的工作原理：

alert($(this).text()); 

，而不是

$('table > tbody').html('<tr><td>'+$(this).text()+'</td></tr>'); 

所以我想這個問題是存在的......

Answer 1

線$('table > tbody').html('<tr><td>'+$(this).text()+'</td></tr>');將tbody中的所有html替換爲該函數的內容。

你應該append()的內容而不是填充它。

$('table > tbody').append('<tr><td>'+$(this).text()+'</td></tr>');