使用 jQuery 从 JSON 填充表

Posted

技术标签:

【中文标题】使用 jQuery 从 JSON 填充表【英文标题】:Populating a table from JSON with jQuery 【发布时间】:2011-12-01 21:01:54 【问题描述】:

这是使用 jQuery 从 JSON 数据填充表格的有效方法,还是有更好/成本更低的方法?最大行数约为 100。我不想使用插件。

JS:

$.ajax(
    url: 'public.json',
    dataType: 'json',
    success: function(data) 
        var row = '<tr class="header">';
        for (var i in data.headers) 
            row += '<th style=""><a href="#" class="sort"><span>' + data.headers[i] + '</span></a></th>';
        
        row += '</tr>'
        $(row).appendTo('table.data');
        row = '';
        for (var i in data.rows) 
            row += '<tr id="' + i + '">';
            row += '<td>' + data.rows[i].date + '</td>';
            row += '<td>' + data.rows[i].company + '</td>';
            row += '<td>' + data.rows[i].location + '</td>';
            ...
            row += '</tr>';
        
        $(row).appendTo('table.data');
    ,
);

JSON:


    "headers": 
        "date": "Date",
        "company": "Company",
        "location": "Location",
        ...
    ,
    "rows": [
        "date": "09/18/2011",
        "company": "Company name",
        "location": "US",
        ...
    ,
    ...

编辑:本质上,我想弄清楚是否将所有行集中到一个字符串中,将其转换为一个 jQuery 对象,然后将其附加到表中是一个好主意,假设这个可以在页面上多次刷新数据。

【问题讨论】:

你看过 jQuery 模板 - api.jquery.com/category/plugins/templates 吗? 我不认为建议使用处于测试阶段且可能因生产原因而更改的插件。 @Floyd “这些文档主题涉及 jQuery 模板 插件”。 OP 表示他们不想使用一个。 @lolwut 和 JamWaffles:我的错。我确实错过了插件超出范围的提及。 An answer to another question表明您的方法“先构建字符串然后在一次调用中将其全部添加”确实比多次添加更有效。 【参考方案1】:

而不是for .. in 语法和字符串构建,我会使用jQuery.each() function

像这样:

$.ajax(
    url: 'public.json',
    dataType: 'json',
    success: function(data) 
        var $tr =$('<tr>').addClass('header');
        $.each(data.headers, function(i,header)
            $tr.append($('<th>').append($('a').addClass('sort').attr('href','#').append($('span').text(header))));
        );
        $tr.appendTo('table.data');
        $.each(data.rows,function(i,row)
            $('<tr>').attr('id',i).
                append($('<td>').text(row.date)).
                append($('<td>').text(row.company)).
                append($('<td>').text(row.location)).appendTo('table.data');
        );
    
);

【讨论】:

使用 $.each 代替 for...in 有什么好处?我的印象是 $.each 比 for...in 更昂贵。 你是对的。我不知道。您可以使用 jQuery 而不是字符串构建,但是由于您的问题是关于昂贵的,我想您的代码很好......jsperf.com/jquery-each-vs-for-loop/6

以上是关于使用 jQuery 从 JSON 填充表的主要内容,如果未能解决你的问题,请参考以下文章

使用javascript从jsondata.json文件填充html表[重复]

PHP-AJAX:如何通过 php/json 数组从查询中填充 jquery 数据表

用 Json 数组 MVC 4 填充 jquery 数据表

jQuery DataTable 从搜索中重新填充表

使用 JQuery 填充表

如何使用从 Spring MVC 发回的 JSON 对象填充 jQuery 数据表的行?