javascript - 将 JSON 对象解析为 HTML 表

标签 javascript jquery html json twitter-bootstrap-3

我正在尝试将 JSON 对象解析为 html 表,但我似乎无法正确处理。

所需格式:

Last Year     This Year     Future Years
45423         36721         873409

当前格式:

Last Year     45423
This Year     36721
Future Years  873409

JSON:

[{column_name:"Last Year", "column_data":45423},{column_name:"This Year", "column_data":36721},{column_name:"Future Years", "column_data":873409}]

HTML:

<div class="panel-body">
    <div id="main-aged-debtors-bar" style="height: 250px"></div>
    <div>
        <table class="table table-hover" id="crpw_table">
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

代码:

$.getJSON(url, jsonObject,
    function (data) {
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].column_name + "</td>");
            tr.append("<td>" + data[i].column_data + "</td>");
            $('#crpw_table').append(tr);
        }
    });  

最佳答案

没有太大区别

$.getJSON(url, jsonObject,
    function (data) {
        tr1 = $('<tr/>');
        tr2 = $('<tr/>');
        for (var i = 0; i < data.length; i++) {
            tr1.append("<td>" + data[i].column_name + "</td>");
            tr2.append("<td>" + data[i].column_data + "</td>");
        }
        $('#crpw_table').append(tr1);
        $('#crpw_table').append(tr2);
    }
);  

关于javascript - 将 JSON 对象解析为 HTML 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32567150/

相关文章:

javascript - JQuery AJAX 成功 + 淡入

javascript - 为什么我的 div 没有正确显示?

javascript - 将自动播放 + 上一个下一个按钮添加到 slider

html - 在不定义关键帧的情况下动画位置变化

php - 类属性中的多个类,一行最多 80 个字符

javascript - 返回已解决的 promise 和仅处理解决的常规 promise 之间的区别

javascript - 使用 doxygen 记录 Node.js

javascript - 获取与父级相关的子级边距

javascript - 从 Canvas 面板中提取以 Base64 编码的文本

Jquery - 修复 float 元素和动画背景