使用javascript数组填充html表格

Question

我想用JavaScript array填充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中的每个项目创建一个新的表格行，并将其添加到帖子表中以获得您的预期结果。

例如

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; 

Answer 2

您的代码有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); 

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

Answer 3

它不会为我工作。

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

我的HTML：

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

我的Web服务（我使用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'; 
}