javascript - 使用 javascript 数组填充 html 表

Question

我想用 JavaScript 数组 填充 HTML 表格。但是，它不起作用，我不知道为什么，我的“innerHTML”没有被解释。

我的变量包含好的值，但是当我这样做时:

document.getElementById("title").innerHTML = title;

它不起作用。

这是我的代码:

var title = "";
var link = "";
var date = "";
var image = "";

function get_posts() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "my_url");
xhr.onload = function () {
    if (xhr.responseText == 0) {
        alert("Vous n'avez poster aucun post");

    } else {
        var posts_array = JSON.parse(xhr.responseText);

        for (var i = 0; i < posts_array.length; i++)
        {
            title = posts_array[i][0];
            link = posts_array[i][1];
            date = posts_array[i][2];
            image = posts_array[i][3];

        }
    document.getElementById("title").innerHTML = title;
    }
}
xhr.send();
}

这是我的 HTML:

<table id="posts">
                <tr>
                    <th id="test">Titre</th>
                    <th>Lien</th>
                    <th>Date</th>
                    <th>Image</th>
                </tr>
                <tr>
                    <td id="title"></td>
                    <td id="link"></td>
                    <td id="date"></td>
                    <td id="image"></td>
                </tr>
            </table>

Answer 1

您在循环内分配了 title 的值，然后将单个单元格的 innerHTML 设置为 title。假设您的 responseText 格式正确，posts 表将只包含数组中的最后一个元素。您似乎需要为 posts_array 中的每个项目创建一个新的表行，并将其添加到 posts 表中以获得您想要的结果。

例如

var t = "";
for (var i = 0; i < posts_array.length; i++){
      var tr = "<tr>";
      tr += "<td>"+posts_array[i][0]+"</td>";
      tr += "<td>"+posts_array[i][1]+"</td>";
      tr += "<td>"+posts_array[i][2]+"</td>";
      tr += "<td>"+posts_array[i][3]+"</td>";
      tr += "</tr>";
      t += tr;
}
document.getElementById("posts").innerHTML += t;