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模板检查了它。

Using JSRender Fiddle

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

3 个答案: