Question

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

bool parseMeta()

任何人都可以帮助我吗？

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不会在循环之前更新新行。因此，您必须在tableBody包含所有必需的值/行后更新tableRow。

所以，下面的代码

//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

带有JSON数据的动态Javascript表

2 个答案: