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

你实际上是在获取对象的引用，所以当你.append它时，你会附加到该元素，而不是它的子元素。

有几种方法可以解决这个问题，其中一种方法就是给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");

（有些整理可能也是一个想法，但希望你得到基本的想法）

使用jquery更新表

3 个答案: