[英]Populate html table with javascript array
I would like to fill an HTML table with a JavaScript array
. 我想用
JavaScript array
填充HTML表。 But, it doesn't work and I don't know why, my "innerHTML" is not interpreted. 但是,它不起作用,我也不知道为什么,我的“ innerHTML”没有被解释。
My variable contains the good value, but when I do this : 我的变量包含良好的价值,但是当我这样做时:
document.getElementById("title").innerHTML = title;
It doesn't work. 没用
This is my code: 这是我的代码:
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();
}
This is my HTML : 这是我的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>
You're assigning the value of title
inside your loop and then setting the innerHTML of an individual cell to title
. 您要在循环内分配
title
的值,然后将单个单元格的innerHTML设置为title
。 Assuming your responseText is formatted correctly, the posts table will only ever contain the last element in your array. 假设您的responseText格式正确,则posts表将仅包含数组中的最后一个元素。 It seems like you need to create a new table row for each item in
posts_array
and add it to the posts table to get your intended result. 似乎您需要为
posts_array
每个项目创建一个新的表行,并将其添加到posts表中以获得预期的结果。
eg 例如
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;
You have 3 errors in your code. 您的代码中有3个错误。
title
, link
, date
and image
on each iteration. title
, link
, date
和image
。 Easiest (and most common) way to create table from array is build HTML string (with table markup), and append it to table. 从数组创建表的最简单(也是最常见)方法是构建HTML字符串(带有表标记),并将其附加到表中。 Unfortunately IE do not support appending html into
table
, to solve this you may use jquery (it will create Elements
from html and append them). 不幸的是,IE不支持将html附加到
table
,要解决此问题,您可以使用jquery(它将从html创建Elements
并将其附加)。
Example: 例:
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 );
Another way is to use table dom api, this will not require jQuery: 另一种方法是使用表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]
}
}
It doesn't work for me. 它对我不起作用。
I want to display wordpress posts into an HTML table. 我想将wordpress帖子显示到HTML表中。
My JS : 我的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();
}
My HTML : 我的HTML:
<table id="posts">
<tr>
<th id="test">Titre</th>
<th>Lien</th>
<th>Date</th>
<th>Image</th>
</tr>
</table>
My Web service (i'm using wordpress) : 我的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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.