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はtableにhtmlを追加することをサポートしていません。これを解決するには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サービス（私はワードプレスを使用しています）：

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