Question

在我寫的這個腳本中有些東西沒有看到，我想更新/重繪DIV中的表格。我寫了這個：

<div id="e-table"> 
    ... 
</div> 

<script> 

    var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody>'; 
    var tableFooter = '</tbody></table>'; 
    var table = $("#e-table"); 

    function updateEvents() { 
     $.ajax({ 
      url: "/monitor/ajaxEvents", 
      dataType: "json" 
     }).done(function(data) { 
       refreshTable(data); 
     }); 
    } 

    function refreshTable(data) { 
     table.html(tableHeader); 
     $.each(data, function(i, item) { 
      table.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>"); 
     }); 
     table.append(tableFooter); 
    } 


    updateEvents(); 
</script> 

我保存表部分是恆定的tableHeader和tableFooter中，在一個週期內我追加TD元素，但這是腳本輸出一些奇怪的事情：

<div id="e-table"> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Date</th> 
      <th>Type</th> 
      <th>Information</th> 
     </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
    <tr> 
     <td>2014-07-03 12:12:00</td> 
     <td>withdrawal</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 12:12:00</td> 
     <td>general</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 12:11:58</td> 
     <td>withdrawal</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 12:11:58</td> 
     <td>general</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 11:33:43</td> 
     <td>withdrawal</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 11:33:43</td> 
     <td>general</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 11:33:42</td> 
     <td>withdrawal</td> 
     <td>FOO</td> 
    </tr> 
    <tr> 
     <td>2014-07-03 11:33:42</td> 
     <td>general</td> 
     <td>FOO</td> 
    </tr> 
</div> 

我沒有明白，爲什麼tableFooter在打印元素之前打印？

Answer 1

.append()將無法​​正常工作像正常的字符串連接，

做這樣的，

function refreshTable(data) { 

$.each(data, function(i, item) { 
    tableHeader += "<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>" 
}); 

tableHeader += tableFooter 
table.html(tableHeader); 
} 

Answer 2

如果你聲明

var table = $("#e-table"); 

你實際上得到的對象的引用，所以當你加入它時，你會追加到該元素，而不是它的孩子。

有一些方法可以解決這個問題，其中一個就是給tbody一個自己的id，例如，

var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody id=\"tableBody\">'; 
    var tableFooter = '</tbody></table>'; 

，然後獲取對象的引用，而不是

var table = $("#tableBody"); 

（有的收拾可能是一個過於想法在這裏，但我希望你得到的基本思想）

Answer 3

你使用jQuery來分配ID爲'e-table'的'Div'元素添加到名爲'table'的變量中。因此，您正在追加'Div'元素。這裏是你需要做的，如果你打算使用jQuery ...

**注意：當你這樣做的正確方法時，你的'refreshTable'方法實際上並沒有清除內容。如果您真的希望在重新填充之前清空表格，則必須清除所有子元素。

var table = $('<table></table'); 
var tableHeader = $('<th></th>') 
         .append($('<tr></tr>') 
           .append($('<th></th>').html('Date')) 
           .append($('<th></th>').html('Information'))); 
var tableBody = $('<tbody></tbody>'); 


function updateEvents() { 
    $.ajax({ 
     url: "/monitor/ajaxEvents", 
     dataType: "json" 
    }).done(function(data) { 
      refreshTable(data); 
    }); 
} 

function refreshTable(data) { 
    table.append(tableBody); 
    table.append(tableHeader); 
    $.each(data, function(i, item) { 
     tableBody.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>"); 
    }); 
} 


updateEvents();