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();