使用jQuery从JSON创建表

时间:2013-03-02 00:17:29

标签: javascript jquery html json

我有一个json文件,它本质上是一个剧院的布局。

{
    "who": "RSNO",
    "what": "An American Festival",
    "when": "2013-02-08 19:30",
    "where": "User Hall - Main Auditorium",
    "seats": [
        "00000000000000000011111111111111000000000000000000",
        "0000000000000001111111111111111aaa0000000000000000",
        "00000000000000aa111111111111111aaaaa00000000000000",
        "00000000000001111111111111111111111111000000000000",
        "000000000aa00aaaaaaaaaaaaaaaaaaaaaa1100aa000000000",
        "00000001111001111111111111111111111100111100000000",
        "00000aaaaaa0011aaaaaaaaa11111111aaa1100aaaaaa00000",
        "00001111111001111111111111111111111100111111100000",
        "000aaaaaaa110011111111111111111111110011aaaaaaa000",
        "00111111111100111111111111111111111001111111111000",
        "00aaaaa1111110011111111111111111111001111aaaaaaa00",
        "11111111111100111111111111111111111001111111111110",
        "0aaaaaaaaaaaa001111111111111111111100aaaaaaaaaaaa0",
        "01111111111110011111111111111111110011111111111100",
        "00000000000000001111111111111111110000000000000000",
        "01111111111111001111111111111111100111111111111100",
        "01111111111111001111111111111111110011111111111110",
        "01111111111111001111111111111111100111111111111100",
        "00a11111111111100111111111111111100111111111111a00",
        "00111111111111100111111111111111001111111111111000",
        "00011111111111110011111111111111001111111111111000",
        "00111111111111100111111111111111001111111111111000",
        "00011111111111110011111111111111001111111111111000",
        "00011111111111110011111111111110011111111111110000",
        "0000000111a111111001111a1111a110011111111110000000",
        "00000000111111110011111111111110011111111000000000",
        "00000000001111111001111111111110011111110000000000",
        "00000000000000111001111111111100111000000000000000"
    ],
    "rows": [
        "DD",
        "CC",
        "BB",
        "AA",
        "Z",
        "Y",
        "X",
        "W",
        "V",
        "U",
        "T",
        "S",
        "R",
        "Q",
        "P",
        "N",
        "M",
        "L",
        "K",
        "J",
        "H",
        "G",
        "F",
        "E",
        "D",
        "C",
        "B",
        "A"
    ],
    "seatPrice": [
        "                  00000000000000                  ",
        "               0000000000000000000                ",
        "              0000000000000000000000              ",
        "             0000000000000000000000000            ",
        "         00  000000000000000000000000  00         ",
        "       0000  00000000000000000000000  0000        ",
        "     000000  000000000000000000000000  000000     ",
        "    0000000  00000000000000000000000  0000000     ",
        "   000000000  0000000000000000000000  000000000   ",
        "  0000000000  000000000000000000000  0000000000   ",
        "  00000000000  00000000000000000000  00000000000  ",
        "000000000000  000000000000000000000  000000000000 ",
        " 000000000000  00000000000000000000  000000000000 ",
        " 000000000000  0000000000000000000  000000000000  ",
        "                000000000000000000                ",
        " 0000000000000  00000000000000000  0000000000000  ",
        " 0000000000000  000000000000000000  0000000000000 ",
        " 0000000000000  00000000000000000  0000000000000  ",
        "  0000000000000  0000000000000000  0000000000000  ",
        "  0000000000000  000000000000000  0000000000000   ",
        "   0000000000000  00000000000000  0000000000000   ",
        "  0000000000000  000000000000000  0000000000000   ",
        "   0000000000000  00000000000000  0000000000000   ",
        "   0000000000000  0011111111100  0000000000000    ",
        "       0000000000  111111111111  0000000000       ",
        "        00000000  1111111111111  00000000         ",
        "          0000000  111111111111  0000000          ",
        "              000  00000000000  000               "
    ],
    "priceLookup": [
        10,
        20
    ]
}

基本上,每个字符(包括空格)应该成为表格中的单元格,并且根据字符,应该有不同的类。每个单元格还有一个作为座位号的引用。我不知道从哪里开始,这个网站上的其他问题甚至没有帮助澄清一个体面的方法。任何帮助将非常感激。

1 个答案:

答案 0 :(得分:1)

从以下内容开始:

var json  = JSON.parse(jsonString),
    table = $('<table />');


for (key in json) {
    var tr = $('<tr />', {'class': key, html: '<td>'+key+'</td><td>'+json[key]+'</td>'});
    table.append(tr);
}

$('body').append(table);