Question

首先，我是JSON和Javascript的绝对新手，所以如果我问这个愚蠢的问题我会道歉。

我有一个以下格式的JSON对象

var Regions = 
{
    "ErrorInfo": {
        "Success": true,
        "ErrorCode": "",
        "Program": "",
        "Method": "",
        "Message": "",
        "Details": "",
        "StackTrace": "",
        "ErrorList": []
    },
    "Results": {
        "CubeName": "MyCube",
        "ViewName": "AllRegions",
        "SandboxName": null,
        "SpreadConsolidations": "False",
        "TitleDimensions": {
            "actvsbud": {
                "DimName": "actvsbud",
                "ID": "Budget",
                "Name": "Budget",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            },
            "region": {
                "DimName": "region",
                "ID": "Norway",
                "Name": "Norway",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            },
            "account1": {
                "DimName": "account1",
                "ID": "Units",
                "Name": "Units",
                "DataType": 0,
                "IsUpdated": false,
                "Attributes": {

                },
                "Caption": null
            }
        },
        "RowSet": {
            "RowCount": 4,
            "TotalRowCount": 4,
            "Rows": [{
                "model": "S Series 1.8 L Sedan",
                "_1Quarter": 320,
                "Jan": 90,
                "Feb": 110,
                "Mar": 120
            },
            {
                "model": "S Series 2.0 L Sedan",
                "_1Quarter": 250,
                "Jan": 80,
                "Feb": 80,
                "Mar": 90
            },
            {
                "model": "S Series 2.5 L Sedan",
                "_1Quarter": 290,
                "Jan": 90,
                "Feb": 90,
                "Mar": 110
            },
            {
                "model": "S Series 2.5 L Sedan 4WD",
                "_1Quarter": 30,
                "Jan": 10,
                "Feb": 10,
                "Mar": 10
            }],
            "ColDims": "month"
        },
        "Columns": {
            "model": {
                "Source": "Member",
                "Name": "",
                "DimName": "model",
                "SourceDataType": 0,
                "DataType": 0,
                "ID": null
            },
            "_1Quarter": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "1 Quarter",
                "ID": "1 Quarter",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Jan": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Jan",
                "ID": "Jan",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Feb": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Feb",
                "ID": "Feb",
                "Attributes": {

                },
                "DimName": "month"
            },
            "Mar": {
                "Source": "Value",
                "SourceDataType": 2,
                "DataType": 2,
                "Name": "Mar",
                "ID": "Mar",
                "Attributes": {

                },
                "DimName": "month"
            }
        },
        "RowTemplate": {
            "model": "",
            "_1Quarter": 0,
            "Jan": 0,
            "Feb": 0,
            "Mar": 0
        }
    }
};

我想使用Columns和model作为行动态创建HTML表。

我只是出于我的深度，所以任何帮助都会受到赞赏。

Answer 1

没有外部插件的情况：

var jsonToTable = function(json) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        })        
        odd_even = !odd_even;               
    })
    $("#tableId").appendChild(tbl_body);
});

jsonToTable(Regions.Rowset.Rows);

此外，您应该使用camelCase在JS中命名变量。

Answer 2

JSRender将帮助您创建一个最小化工作的表。请按照步骤

使用Columns

创建模板

 function renderTemplate()
 {
   var res = "<tr>";
   for(var p in Region.Columns){
    res += "<td>{{:"+p+"}}</td>";
 }
   return res + "</tr>";
 }

使用$.templates

注册模板

$.templates({tableTemp: renderTemplate() });

调用模板的render方法并获取输出字符串。

 var tbody = "<table>" + $.render.tableTemp(Regions.Rowset.Rows) "</table>"

然后将结果放在任意位置。

循环遍历json对象以创建表jquery

2 个答案: