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