動態表格行在DOM中的顯示順序不正確

Question

success: function (data, status) { 
      var header = $("#MainDiv"); 

      header.html(null); 
      var headertemplate = $("<table class='searchlistbody'><tr></th><th>Name</th></tr>"); 
      header.append(headertemplate); 

      $.each(data, function() { 
       var template = $("<tr> <td class='campnameAltrow'><span class='searchListTitle'></span></td></tr>"); 

         template.find('span.searchListTitle').attr('title', this.Title); 

       // add the template to the collection 
       header.append(template); 
      }); 
      header.append("</table>"); 
     }, 

現在，當我嘗試在表格上設置邊框時，我發現它只在第n個標籤上應用邊框，即標題（名稱）。

Debugging further in fire bug I saw that the DOM sequence is in this format 
     <table class='searchlistbody'><tr><th>Name</th></tr></table> 
     <tr> <td class='campnameAltrow'>Test</td></tr> 
     <tr> <td class='campnameAltrow'>Test</td></tr> 
     <tr> <td class='campnameAltrow'>Test</td></tr> 
     <tr> <td class='campnameAltrow'>Test</td></tr> 
     <tr> <td class='campnameAltrow'>Test</td></tr> 

誰能告訴我爲什麼是附加所有for循環行....面前的桌子關閉其AJAX調用

Answer 1

不能添加在拼湊到DOM元素。所以你添加一個表頭，那麼你追加行表

success: function (data, status) { 
      var header = $("#MainDiv"); 

      header.html(null); 
      var headertemplate = $("<table class='searchlistbody'><tr></th><th>Name</th></tr></table>"); 
      header.append(headertemplate); 

      $.each(data, function() { 
       var template = $("<tr> <td class='campnameAltrow'><span class='searchListTitle'></span></td></tr>"); 

         template.find('span.searchListTitle').attr('title', this.Title); 

       // add the template to the collection 
       headertemplate.append(template); 
      }); 
     }, 

Answer 2

從附加功能的文檔來看：http://api.jquery.com/append/它實際上是嘗試用適當的DOM元素

工作

不要試圖用它作爲字符串連接操作

而是試圖創建表元素和追加TH和TRS分別有：

var table = $("<table ...></table>") 
table.append("<th>...</th>") 
$.each(function() { 
    ... 
    table.append("<tr>...</tr>") 
    ... 
})