带有JSON数据的动态Javascript表

我正尝试使用从PHP脚本中获取的Javascript和JSON数据创建并填充动态表。我遇到的问题是创建第一行（标题），并将JSON对象的键放在正确的位置，但我无法创建与这些键相关联的值的第二行（或它不会显示）。这里是我的JS代码：带有JSON数据的动态Javascript表

var oReq = new XMLHttpRequest(); //New request object 
oReq.onload = function() { 
    var Json = JSON.parse(this.responseText); 
    for (value in Json.prods[0]){ 
     alert(value); 
    } 
    var newTable = document.createElement('table'); 

    //Create first row 
    var tableRowFirst = document.createElement('tr'); 

    for (key in Json.prods[0]) { 
     //create new heading 
     var keys = document.createElement('th'); 

     // append Heading to table 
     tableRowFirst.appendChild(keys); 

     //set new heading text content to json information 
     keys.textContent = key; 
    }; 

    //Create rows 
    var tableBody = document.createElement('tbody'); 
    var tableRow = document.createElement('tr'); 
    tableBody.appendChild(tableRow); 

    for (key in Json.prods[0]) { 
     //create new cell 
     var values = document.createElement('td'); 

     // append cell to row 
     tableRow.appendChild(values); 

     //set new content text content to json information 
     values.textContent = Json.prods[0].key; 
    }; 

    //Append table to DOM 
    document.body.appendChild(newTable); 

    //Append rows to new table 
    newTable.appendChild(tableRowFirst); 
    newTable.appendChild(tableBody); 
}; 
oReq.open("get", "../php/getalltag.php", true); 
oReq.send();

任何人都可以帮我吗？

来源

2015-12-02 Luca Giorgi

我想你以错误的方式设置textContent，因为你试图获得名为key的属性，但key实际上是一个存储不动产名称的本地变量。

for (key in Json.prods[0]) { 
     ... 

     //set new content text content to json information 
     values.textContent = Json.prods[0].key; 
    };

这应该是罚款：

values.textContent = Json.prods[0][key];

来源

2015-12-02 12:09:53 laszlokiss88

它的工作，并感谢你，但现在一切都转换为字符串。有没有办法不将它转换为字符串对象？ –

我不确定我的理解。你能为此制作一个小提琴吗？ – laszlokiss88

那么，小提琴不工作，不知道为什么，但至少你可以看到我的JSON数据：https：//jsfiddle.net/qo1vpv7w/。正如你所看到的，我有一个img标签保存在那里，我希望图像被显示，而不是它被视为一个字符串。有没有办法避免这种情况？ –

你应该行for循环之后放置tableBody.appendChild(tableRow);。

当你做newTable.appendChild(tableBody);，那么tableBody不会从循环前的新行更新。因此，您必须在tableRow具有所有必需的值/行之后更新tableBody。

所以，下面的代码

//Create rows 
    var tableBody = document.createElement('tbody'); 
    var tableRow = document.createElement('tr'); 
    tableBody.appendChild(tableRow); 

    for (key in Json.prods[0]) { 
     //create new cell 
     var values = document.createElement('td'); 

     // append cell to row 
     tableRow.appendChild(values); 

     //set new content text content to json information 
     values.textContent = Json.prods[0].key; 
    };

变为

//Create rows 
    var tableBody = document.createElement('tbody'); 
    var tableRow = document.createElement('tr'); 

    for (key in Json.prods[0]) { 
     //create new cell 
     var values = document.createElement('td'); 

     // append cell to row 
     tableRow.appendChild(values); 

     //set new content text content to json information 
     values.textContent = Json.prods[0].key; 
    }; 

    tableBody.appendChild(tableRow); // MOVED HERE

来源

2015-12-02 12:12:11

带有JSON数据的动态Javascript表

回答

相关问题