具有JSON数据的动态Javascript表

Question

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

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();

谁能帮我吗？

Answer 1

我猜您以错误的方式设置了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];

Answer 2

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

当你做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