用javascript从http get返回的JSON对象创建一个表

Question

这是我的javascript中的函数。由另一个函数的onclick函数触发。

    function getValueUsingParentTag(){
        var tv_type = [];
        var screen_size = [];
        var connectivity = [];
        var features = [];
        var chkArray = [tv_type,screen_size,connectivity,features];
        $("#tvtype input:checked").each(function() {
            tv_type.push($(this).val());
        });
        $("#screensize input:checked").each(function() {
            screen_size.push($(this).val());
        });
        $("#connection input:checked").each(function() {
            connectivity.push($(this).val());
        });
        $("#feature input:checked").each(function() {
            features.push($(this).val());
        });
        console.log(chkArray);
        //alert(JSON.stringify(chkArray));      
     alert('hello');
     $.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(chkArray){
        });
}

返回的json对象示例

 {"result":[
  {"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
  {"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
 ]}

我需要根据返回的json对象在javascript中创建一个表。我不知道怎么做。请帮助。

Answer 1

下面的函数以字符串形式构建表。

function getTable(data) {
    var html = "";
    html += "<table><tr><td>product_code</td><td>tv_name</td><td>size</td><td>tv_type</td></tr>";
    html += "<tr>";
    for(var i = 0, ceiling = data.result.length; i < ceiling; i++) {
        var row = data.result[i];
        html += "<td>" + row.product_code + "</td>";
        html += "<td>" + row.tv_name + "</td>";
        html += "<td>" + row.size + "</td>";
        html += "<td>" + row.tv_type + "</td>";
    }
    html += "</tr>";
    html += "</table>";
    return html;
}

假设您有一个id为mydiv的div，您可以使用以下代码将表添加到该div中:

document.getElementById("mydiv").innerHTML = getTable(data);

Answer 2

下面是一个简单的Javascript循环示例:

http://jsfiddle.net/mCLVL/

 var tableData = {"result":[
  {"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
  {"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
 ]};
var tableHTML = "<table>";
for (var i = 0; i < tableData["result"].length; i++) {
 tableHTML += "<tr>";
 tableHTML += "<td>" + tableData["result"][i]["product_code"] + "</td>";
 tableHTML += "<td>" + tableData["result"][i]["tv_name"] + "</td>";
 tableHTML += "<td>" + tableData["result"][i]["size"] + "</td>"; 
 tableHTML += "<td>" + tableData["result"][i]["tv_type"] + "</td>";
 tableHTML += "</tr>";  
}
tableHTML += "</table>";
console.log(tableHTML);

Answer 3

使用JSRender就很简单了。我做了一个小提琴使用jsrender模板检查它。

使用JSRender Fiddle