Question

我正在使用Javascript创建一个动态表来显示我从JSON对象解析的数据。我还想在表格的一个单元格中添加一个图像，我会直接从JSON对象获取HTML代码，如下所示：

jsonObject[0].Image = <img src="../img/img1.jpg"></img>

问题在于，如果我只是尝试将td元素的内容设置为该Json元素，则将其视为字符串而不显示为图像（注意：当我直接显示结果时，此方法正常工作我对数据库进行了查询，但现在我更改了实现以将结果作为JSON对象回显），所以我尝试通过javascript创建一个img元素并将源设置为我想要使用的图像，但没有显示，不仅仅是它阻止了整个表的显示。

有谁知道如何解决这个问题？这是我的JS代码：

var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
    console.log(this.responseText);
    var Json = JSON.parse(this.responseText);
    var newTable = document.getElementById('Prodotti');

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

    newTable.appendChild(tableRowFirst);
    var tableBody = document.createElement('tbody');
    newTable.appendChild(tableBody);

    for (i=0; i<Json.prods.length; i++){
        //Create rows
        var tableRow = document.createElement('tr');

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

                // append Heading to table
                tableRow.appendChild(values);

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

                if (key == "Immagine"){
                    values.setAttribute("id", "TD");
                    var img = document.createElement("img");
                    img.src = "../img/"+Json.prods[i].Nome+".jpg";
                    document.getElementById("TD").appendChild("img");
                }

        };

        tableBody.appendChild(tableRow);
    }
    };
oReq.open("get", "../php/getalltag.php", true);
oReq.send();

Answer 1

由于我创建了td元素，我想附加一个子元素，JavaScript无法通过其ID找到它。改变了行

document.getElementByID("TD").appendChild(img);

到

 values.appendChild(img);

一切顺利。我猜测问题是这个元素在文档中仍然不存在，所以JavaScript无法找到它。我通过在Chrome中使用开发者控制台了解了这一点，以便为未来的我和未来的新手开发人员提供一些建议：在测试新网页时按F12：）

使用Javascript

1 个答案: