使用jQuery更新表

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

您正在使用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();

Answer 3

您在哪里申报

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

（这里也可以整理一些主意，但希望您能掌握必要的主意）