用 JavaScript 数组填充 html 表

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

例如

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;

代码中有 3 个错误。

1. 您可以在每次迭代中覆盖title、link、date和image。
2. 您只设置标题，我认为您要设置所有数据。
3. （可能的错误）您只在表格中设置了 1 个帖子，可能是您想全部看到。

从数组创建表的最简单（也是最常见的）方法是构建HTML字符串（带有表标记），并将其附加到表中。不幸的是，IE不支持将html附加到table中，要解决此问题，您可以使用jquery（它将从html创建Elements并附加它们）。

例：

var posts_array = JSON.parse(xhr.responseText);
var columns = ['title', 'link', 'date', 'image']
var table_html = '';
for (var i = 0; i < posts_array.length; i++)
{
    //create html table row
    table_html += '<tr>';
    for( var j = 0; j < columns.length; j++ ){
        //create html table cell, add class to cells to identify columns          
        table_html += '<td class="' +columns[j]+ '" >' + posts_array[i][j] + '</td>'
    }
    table_html += '</tr>'
}
$( "#posts" ).append(  table_html );

另一种方法是使用 table dom api，这不需要 jQuery：

var posts_array = JSON.parse(xhr.responseText);
var columns = ['title', 'link', 'date', 'image']
var table = document.getElementById('posts');
for (var i = 0; i < posts_array.length; i++)
{
    var row = table.insertRow( -1 ); // -1 is insert as last
    for( var j = 0; j < columns.length; j++ ){
        var cell = row.insertCell( - 1 ); // -1 is insert as last
        cell.className = columns[j]; //
        cell.innerHTML = posts_array[i][j]
    }
}

对我不起作用。

我想将WordPress帖子显示到HTML表格中。

我的 JS ：

function get_posts() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "myUrl");
    xhr.onload = function () {
        if (xhr.responseText == 0) {
            alert("Vous n'avez poster aucun post");
        } else {
            var posts_array = JSON.parse(xhr.responseText);
            var columns = ['title', 'link', 'date', 'image']
            var table_html = '';
            for (var i = 0; i < posts_array.length; i++)
            {
                //create html table row
                table_html += '<tr>';
                for (var j = 0; j < columns.length; j++) {
                    //create html table cell, add class to cells to identify columns          
                    table_html += '<td class="' + columns[j] + '" >' + posts_array[i][j] + '</td>'
                }
                table_html += '</tr>'
            }
        }
        $("#posts").append(table_html);
    }
    xhr.send();
}

我的网页 ：

<table id="posts">
                    <tr>
                        <th id="test">Titre</th>
                        <th>Lien</th>
                        <th>Date</th>
                        <th>Image</th>
                    </tr>
                </table>

我的网络服务（我正在使用wordpress）：

global $current_user;
if(is_user_logged_in){
$current_user = wp_get_current_user();
}
$array = array();
$posts_array = array('author' => $current_user->ID, "post_type" => "alertes", "orderby" => "date", "order" => "DESC", "post_status" => "publish", "posts_per_page" => "10");
$posts = new WP_Query($posts_array);
if($posts->have_posts()){
    while($posts->have_posts()){
        $posts->the_post();
        $post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
        array_push($array, $post_array);
    }
        echo json_encode($array);
}
else {
    echo '0';
}