如何使用 JQuery 或 Javascript 从 JSON 对象绘制 table

Question

{
    "content": {
        "title": "Schema",
        "cellValues": [
            [
                "c1",
                "count"
            ],
            [
                "DoubleType",
                "LongType"
            ]
        ],
        "id": 3,
        "name": "Histogram",
        "type": "table"
    }
}

我有这个 JSON 来了，因此我想用 javascript 或 Jquery 制作一个 table。输出应该是这样的。 JSON 对象作为列表中的单元格值出现，这会产生问题。我想用 DoubleType 映射 c1 并在每个单元格中用 longType 计数。

  c1             count
  DoubleType     LongType

请推荐...

Answer 1

您可能对使用 DataTables 等插件感兴趣，它可以使用 JSON 提要作为其来源。

https://www.datatables.net/

Answer 2

查看此 JSFiddle 以获取运行示例。

创建Table

function createTable(tableData) {
    var tableId    = tableData.content.id;
    var tableName  = tableData.content.name;
    var tableTitle = tableData.content.title;
    var tableRows  = tableData.content.cellValues;

    // create table
    $('body').append('<table border="1" id="' + tableId + '" name="' + tableName + '"></table>');

    // create title
    $('#'+tableId).append('<caption>' + tableTitle + '</caption>');

    // create rows
    for (var i = 0; i < tableRows.length; i++) {
        createRow(tableId, tableRows[i]);
    }
}

创建行和单元格

function createRow(table_id, rowData) {
    var row = $("<tr />")
    $("#"+table_id).append(row);

    // create cells inside this row
    for (var i = 0; i < rowData.length; i++) {
        row.append($("<td>" + rowData[i] + "</td>"));
    }
}

Answer 3

$(function() {
    var json = {
        "content": {
            "title": "Schema",
            "cellValues": [
                [
                    "c1",
                    "count"
                ],
                [
                    "DoubleType",
                    "LongType"
                ]
            ],
            "id": 3,
            "name": "Histogram",
            "type": "table"
        }
    };
    //Define & initialize vars
    var table = $('<table cellspacing="0" cellpadding="3" border="1"/>'),
      tbody = $('<tbody/>'),
      tr = $('<tr/>'),
      td = $('<td/>');
    //create rows in tbody
    $.each(json.content.cellValues, function(i,v) {
        var thisTR = tr.clone();
        $.each(v, function(j,u) {
            thisTR.append( td.clone().html( u ) );
        });
        tbody.append( thisTR );
    });
    //append tbody to table
    table.append( tbody );
    //append table to DOM
    $('#table').html( table );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="table"></div>

如何使用 JQuery 或 Javascript 从 JSON 对象绘制 table

how to draw a table using JQuery or Javascript from a JSON Object

javascript

jquery

jquery-ui

javascript-objects

angularjs

创建Table

创建行和单元格