Question

我从下面的Ajax调用中获取JSON响应：

{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }

我需要创建一个像

这样的表

KEYS  VALUES
Keys1 Value1
Keys2 Value2
Keys3 Value3
Keys4 Value4

我习惯通过以下函数阅读上面的JSON字符串

var resData = {
   "Key1": "Value1",
   "Key2": "Value2",
   "Key3": "Value3",
   "Key4": "Value4",
};
JSON.parse(resData, function (k, v) {
   alert(k); // It shows Key value
   alert(v); // It shows value
});

我无法使用此功能构建。所以，请帮我调整这段代码或新代码，使用JSON键和值动态构建HTML表。

Answer 1

对于这个html：

<table id="myTable">
    <thead>
        <tr>
            <th>KEY</th>
            <th>VALUE</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

这个jQuery脚本：

var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" },
    $tbody = $('#myTable').find('tbody');

JSON.parse(resData, function (k, v) {
    $tbody.append('<tr><td>'+k+'</td><td>'+v+'</td></tr>');
});

Answer 2

喜欢......

var table = "<table>";
var resData = {"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3" , "Key4":"Value4" }
resData = JSON.parse(resData);
for(var k in resData ) {
table +="<tr><td>"+k+"</td><td>"+resData[k]+"</td></tr>";
});
table +="</table>"

Answer 3

又一种方式。动态创建表

var table = $('<table/>').html('<thead><tr><th>KEYS</th><th>VALUES</th></tr></thead>').appendTo('body'),
    tbody = table.append('<tbody/>');
$.each(resData, function(key, value){
    tbody.append('<tr><td>'+key+'</td><td>'+value+'</td></tr>');
});

DEMO

<强> [编辑]

此外，还有一个如何从多维对象（或/和数组）创建表的示例：

＆＃13;

var resData = {
    "John": {
        "Name":"John", 
        "Surname":"Doe",
        "Sex":"Mr.",
        "Age":"36",
        "About":{
            "Status":"Married",
            "Interests":[
                "Family",
                "Games",
                "Swimming",
                "Photography",
                "Football"
            ],
            "Work":"Web developer"
        }
    }
};

function parseToTable(obj, el){
    $.each(obj, function(key, value){
        var keyType = ($.isPlainObject(value) ? '{'+key+'}' : ($.isArray(value) ? '['+key+']' : key));
        var tr = $('<tr/>').html('<td>'+keyType+' :</td>').appendTo(el);
        if($.isPlainObject(value) || $.isArray(value)){
            parseToTable(value, $('<table/>').html('<thead><tr><th>KEY:</th><th>VALUE:</th></tr></thead>').appendTo(tr));
        }else{
            tr.append('<td>'+value+'</td>');
        }
    });
}

var table = $('<table/>').html('<thead><tr><th>KEY:</th><th>VALUE:</th></tr></thead>').appendTo('body');
parseToTable(resData, table.append('<tbody/>'));

＆＃13;

table {
    border-collapse: collapse;
    border: 1px solid #929292;
    margin:8px;
    box-shadow: 0 0 8px #ababab;
}

th, td {
    padding: 5px;
    border: 1px solid #929292;
    text-align: left;
    vertical-align: top;
    background:#fff;
    font-weight:normal;
}

th{
    background:#a9a9a9;
    color:white;
}
th:nth-child(1){
    text-align: right;
}

td:nth-child(1){
    font-weight: bold;
    background: #f6f6f6;
    text-align: right;

}
td:nth-child(2){
    font-style: italic;
    text-align: left;
}

tr table thead tr th{
    font-size:12px;    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

使用JSON键和值动态创建表

3 个答案: