動態生成的表格出現錯誤

我試圖正確顯示使用引導類的表。該表是從json文件動態生成的。動態生成的表格出現錯誤

問題是，當我使用工具檢查元素時，即使它們顯示在表中，但它們不會獲得引導類，因爲這些屬性在我想要之前會關閉。這裏是我的代碼：

 // Makes the request to searches @ Reddit using the Reddit API 
    $.getJSON(
    "http://www.reddit.com/r/entrepreneur/search.json?q=" + searchString + "&sort=hot", 
    function foo(data) 
    { 
     //Initializes the table 
     $("#reddit-content").append('<table class="table table-striped">'); 

     $("#reddit-content").append('<thead>'); 
     $("#reddit-content").append('<tr>'); 
     $("#reddit-content").append('<th>Title</th>'); 
     $("#reddit-content").append('<th>Ups</th>'); 
     $("#reddit-content").append('<th>Downs</th>'); 
     $("#reddit-content").append('<th>Date</th>'); 
     $("#reddit-content").append('<th>Visit</th>'); 
     $("#reddit-content").append('</tr>'); 
     $("#reddit-content").append('</thead>'); 
     $("#reddit-content").append('<tbody>'); 

     $.each(
     data.data.children.slice(0, 25), 
     function (i, post) { 

     // create a new javascript Date object based on the timestamp 
     // multiplied by 1000 so that the argument is in milliseconds, not seconds 
     var date = new Date(post.data.created_utc * 1000); 
     // hours part from the timestamp 
     var hours = date.getHours(); 
     // minutes part from the timestamp 
     var minutes = "0" + date.getMinutes(); 
     // seconds part from the timestamp 
     var seconds = "0" + date.getSeconds(); 
     // Formats the date object for proper viasualization 
     var formattedTime = hours + ':' + minutes.substr(minutes.length-2) + ':' + seconds.substr(seconds.length-2); 

      $("#reddit-content").append('<tr>'); 
      $("#reddit-content").append('<td>' + post.data.title + '</td>'); 
      $("#reddit-content").append('<td>' + post.data.ups + '</td>'); 
      $("#reddit-content").append('<td>' + post.data.downs + '</td>'); 
      $("#reddit-content").append('<td>' + formattedTime + '</td>'); 
      $("#reddit-content").append('<td>' + post.data.permalink + '</td>'); 
      $("#reddit-content").append('</tr>'); 
     } 
    ) 
     //Ends the table 
     $("#reddit-content").append('</tbody>'); 
     $("#reddit-content").append('</table>'); 
    } 
)

而下面的圖片中可以看到，該標籤被關閉它打開後的權利，這樣我可以引導CSS並不適用於它。

enter image description here

如何任何想法，我可以解決這個問題？

來源

2014-10-19 Cláudio Ribeiro

見MDN的使用document.createElement（「TABLE」），HTMLTableElement.insertRow，HTMLTableRowElement.insertCell和停止跨瀏覽器的兼容性，特別是舊的瀏覽器自動生成表格時使用。 – 2014-10-19 13:40:24

您僅追加到$("#reddit-content")。您需要將內容附加到相應的父級。事情是這樣的：

var $table = $("#reddit-content").append('<table class="table table-striped">'); 
$table.append('<thead><tr><th>...</thead>'); 
$table.append('<tr>..</tr>'); 
     :

來源

2014-10-19 13:49:08 Teemu

太好了，我現在明白了，非常感謝。問題出在我對append的解釋上，這是不正確的。 – 2014-10-19 15:15:10

動態生成的表格出現錯誤

回答

相關問題