使用jquery更新表

updating a table using jquery

本文关键字：更新 jquery 使用      更新时间：2023-09-26

我在这个脚本中没有看到我写的东西，我想更新/重新绘制一个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 ??

.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);
}

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

在哪里声明

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

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

有几种方法可以解决这个问题，一种方法是给主体一个自己的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");

相关文章：