javascript - 使用javascript动态更新表

Question

我有一个页面，我在其中向服务器发送 ajax 请求。页面上有一个表格，显示一些数据。服务器返回一个 json 对象，它是一个对象列表，它不包含页面的任何布局。

我只想通过返回的 json 更新表行。如何在不使用第三方库且仅使用 jquery 的情况下执行此操作？我只是想要一个大概的想法和例子。

Answer 1

这是 demo fiddle . (简单版)
新: 查看 updated fiddle (进阶版)。

假设您已检索到此 JSON 数据:

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

你有这张表:

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

现在，您需要一种能够以可自定义的顺序和存在来解析值的方法。例如，如果您可以将字段数组传递给解析器函数；您可以设置字段的顺序并在需要时省略一两个字段:

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

注意 field4不被解析。

loadTable函数循环遍历返回数组的项目并创建一个 <tr>每个字段值都在 <td> 中.这是简单的功能:

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

更新:

添加了对以下内容的支持:

• 表格标题
• 默认文本(空列表)
• 附加列表
• 收拾 table
• 等...

您现在可以简单地包含一个空表和 dynamicTable将处理其余部分:

<table id="data-table"></table>

调用dynamicTable.config()配置表格的方法:

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

然后调用dt.load(data);加载新数据(如果有则删除之前的列表)，
或调用 dt.load(data, true);将新数据追加到上一个列表的末尾。

调用 dt.clear();方法将清除整个列表。

Updated fiddle here .