用javascript数组填充html表

我想用

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

var title=”“；
var link=“”；
var日期=”；
var image=“”；
函数get_posts（）{
var xhr=new XMLHttpRequest（）；
打开（“获取”、“我的url”）；
xhr.onload=函数（）{
如果（xhr.responseText==0）{
警报（“Vous n'avez海报aucun post”）；
}否则{
var posts_array=JSON.parse（xhr.responseText）；
对于（var i=0；i

这是我的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>

乳头
留置权
日期
形象

您正在循环中分配

title

的值，然后将单个单元格的innerHTML设置为

title

。假设responseText格式正确，posts表将只包含数组中的最后一个元素。似乎您需要为

posts\u数组中的每个项目创建一个新的表行，并将其添加到posts表中以获得预期的结果

e、 g

var t=”“；
对于（var i=0；i
您的代码中有3个错误

您可以在每次迭代中覆盖
标题
、
链接
、
日期
和
图像
您只设置了标题，我想您需要设置所有数据
（可能错误）您只在表中设置了1个post，可能是
我想看看他们
从数组创建表的最简单（也是最常见）的方法是构建HTML字符串（带有表标记），并将其附加到表中。不幸的是，IE不支持将html追加到
表中
，要解决这个问题，您可以使用jquery（它将从html创建
元素
，并追加它们）

例如：

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

var posts\u array=JSON.parse（xhr.responseText）；
var columns=['title'，'link'，'date'，'image']
var表_html=''；
对于（var i=0；i

另一种方法是使用表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]
    }
}

var posts\u array=JSON.parse（xhr.responseText）；
var columns=['title'，'link'，'date'，'image']
var table=document.getElementById（'posts'）；
对于（var i=0；i
它对我不起作用

我想在HTML表格中显示wordpress帖子

我的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();
}

你能提供你的
HTML
？你有没有检查过xhr.responseText确实包含数据？此外，您还知道，在通过posts_数组的每个循环上，您正在使用循环中的最新值覆盖title变量？你的意思是连接它们吗？首先提醒循环中的标题，以检查，
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>

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