如何创建使用 Javascript 数组填充 HTML table 的循环
How to create loop that populates an HTML table with a Javascript array
我的任务是使用 javascript 数组填充 HTML table,但我在理解如何让我的数组填充实际HTMLtable。我必须创建一个 table,其中包含 5 个菜单项图像、5 个菜单项描述及其 5 个价格。我在下面提供了我的数组,但不知道我需要执行什么函数来让数组填充 HTML table。你建议我怎么做才能让它们填充 HTML table?
此外,根据作业,我必须使用数值数组存储价格,使用字符串数组存储图像文件。
我想我必须执行某种 'for' 循环,但我不确定。
感谢您的帮助,请告诉我如何改进这个问题。
谢谢,
//my arrays
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
对于初学者,我建议将数组合并为一个数组,以避免任何有关索引的错误。
标准 html 格式的类型为:
<table>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>price</th>
<th>imageSrc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chicken soup</td>
<td>Delicious creamy chicken soup</td>
<td>14.99</td>
<td><img src="chickensoup.jpg" alt="chickensoup.jpg"></td>
</tr>
</tbody>
</table>
所以你需要一个循环来打印所有的headers。
您需要一个循环来为每个项目创建不同的行。
您需要在行循环内进行最后一个循环,以将每个单元格 (food 属性) 添加到行中。
var items = [{
name: "Chicken soup",
description: "Delicious creamy chicken soup",
price: 14.99,
imageSrc: "chickensoup.jpg"
}, {
name: "Chicken tacos",
description: "Homemade tacos",
price: 17.99,
imageSrc: "chickentaco.jpg"
}, {
name: "Chicken quesadilla",
description: "Cheesy chicken quesadillas",
price: 15.75,
imageSrc: "chickenque.jpg"
}, {
name: "Chicken burrito",
description: "Hearty stuffed chicken burrito",
price: 22.95,
imageSrc: "chickenburrito.jpg"
}, {
name: "Chicken enchilada",
description: "World famous chicken enchilada",
price: 12.55,
imageSrc: "chickenenchilada.jpg"
}];
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
items.forEach(function(foodItem) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
var image = document.createElement("img");
foodProperty.appendChild(image);
image.src = foodItem[propertyName];
image.alt = foodItem[propertyName];
} else {
foodProperty.textContent = foodItem[propertyName];
}
});
});
如果您不能合并数组,那么您可以使用它。
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
var foodList = {
name: item,
description: itemDescription,
price: itemPrice,
imageSrc: imgArray
};
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
for (var index = 0; index < item.length; index++) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
foodProperty.appendChild(foodList[propertyName][index]);
} else {
foodProperty.textContent = foodList[propertyName][index];
}
});
}
看到这个fiddlelinkhttps://jsfiddle.net/j5mnto3g/2/
在 Html
中创建 table
<table border="1">
<thead>
<tr><th>Item Image</th><th>Item Name</th><th>Description</th><th>Price</th></tr>
</thead>
<tbody id="tbl-body"> </tbody>
</table>
并通过简单的 for 循环
在 table 中添加行
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito",
"Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
var rows = '';
for(i = 0; i < item.length; i++){
rows += '<tr><td><img src="'+imgArray[i]+'" width="20" height="20"></td><td>'+item[i]+'</td><td>'+itemDescription[i]+'</td><td>'+itemPrice[i]+'</td></tr>';
}
document.getElementById('tbl-body').innerHTML = rows;
使用正确的图片路径和大小
试试这个:
let itemObject = [];
itemObject.push({
item: 'Chicken soup',
description: 'Delicious creamy chicken soup',
price: 14.99,
image: 'chickensoup.jpg'
});
itemObject.push({
item: 'Chicken tacos',
description: 'Chicken taco',
price: 17.99,
image: 'chickentaco.jpg'
});
itemObject.push({
item: 'Chicken quesadilla',
description: 'Chicken quesadilla',
price: 15.75,
image: 'chickenque.jpg'
});
itemObject.push({
item: 'Chicken burrito',
description: 'Chicken burrito',
price: 22.95,
image: 'chickenburrito.jpg'
});
itemObject.push({
item: 'Chicken enchilada',
description: 'Chicken enchilada',
price: 12.55,
image: 'chickenenchilada.jpg'
});
let tbody = document.getElementById('tbody');
for (let rows of itemObject) {
let tr = document.createElement('TR');
let td, tdText;
for (let value of Object.values(rows)) {
td = document.createElement("TD");
td.appendChild(document.createTextNode(value));
tr.appendChild(td);
}
tbody.appendChild(tr);
};
<table>
<thead>
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
<td>Image</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
我不会展示整个代码,但这是逻辑上做到这一点的最佳方式
//JS
let array = ["item 1", "item2"];
//start a string (of html)
let htmlDisplayed = "<div id='htmlString'><ul>";
//loop each array item as a list item
for (let i=0; i< array.length; i++) {
htmlDisplayed = htmlDisplayed.concat(`<li>${array[i]}</li>`);
}
//close your html tags off
htmlDisplayed = htmlDisplayed.concat("</ul></div>");
//display it
document.getElementById("yourElement").innerHTML = htmlDisplayed;
我的任务是使用 javascript 数组填充 HTML table,但我在理解如何让我的数组填充实际HTMLtable。我必须创建一个 table,其中包含 5 个菜单项图像、5 个菜单项描述及其 5 个价格。我在下面提供了我的数组,但不知道我需要执行什么函数来让数组填充 HTML table。你建议我怎么做才能让它们填充 HTML table?
此外,根据作业,我必须使用数值数组存储价格,使用字符串数组存储图像文件。
我想我必须执行某种 'for' 循环,但我不确定。
感谢您的帮助,请告诉我如何改进这个问题。
谢谢,
//my arrays
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
对于初学者,我建议将数组合并为一个数组,以避免任何有关索引的错误。
标准 html 格式的类型为:
<table>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>price</th>
<th>imageSrc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chicken soup</td>
<td>Delicious creamy chicken soup</td>
<td>14.99</td>
<td><img src="chickensoup.jpg" alt="chickensoup.jpg"></td>
</tr>
</tbody>
</table>
所以你需要一个循环来打印所有的headers。 您需要一个循环来为每个项目创建不同的行。 您需要在行循环内进行最后一个循环,以将每个单元格 (food 属性) 添加到行中。
var items = [{
name: "Chicken soup",
description: "Delicious creamy chicken soup",
price: 14.99,
imageSrc: "chickensoup.jpg"
}, {
name: "Chicken tacos",
description: "Homemade tacos",
price: 17.99,
imageSrc: "chickentaco.jpg"
}, {
name: "Chicken quesadilla",
description: "Cheesy chicken quesadillas",
price: 15.75,
imageSrc: "chickenque.jpg"
}, {
name: "Chicken burrito",
description: "Hearty stuffed chicken burrito",
price: 22.95,
imageSrc: "chickenburrito.jpg"
}, {
name: "Chicken enchilada",
description: "World famous chicken enchilada",
price: 12.55,
imageSrc: "chickenenchilada.jpg"
}];
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
items.forEach(function(foodItem) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
var image = document.createElement("img");
foodProperty.appendChild(image);
image.src = foodItem[propertyName];
image.alt = foodItem[propertyName];
} else {
foodProperty.textContent = foodItem[propertyName];
}
});
});
如果您不能合并数组,那么您可以使用它。
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
var foodList = {
name: item,
description: itemDescription,
price: itemPrice,
imageSrc: imgArray
};
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
for (var index = 0; index < item.length; index++) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
foodProperty.appendChild(foodList[propertyName][index]);
} else {
foodProperty.textContent = foodList[propertyName][index];
}
});
}
看到这个fiddlelinkhttps://jsfiddle.net/j5mnto3g/2/
在 Html
中创建 table<table border="1">
<thead>
<tr><th>Item Image</th><th>Item Name</th><th>Description</th><th>Price</th></tr>
</thead>
<tbody id="tbl-body"> </tbody>
</table>
并通过简单的 for 循环
在 table 中添加行var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito",
"Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
var rows = '';
for(i = 0; i < item.length; i++){
rows += '<tr><td><img src="'+imgArray[i]+'" width="20" height="20"></td><td>'+item[i]+'</td><td>'+itemDescription[i]+'</td><td>'+itemPrice[i]+'</td></tr>';
}
document.getElementById('tbl-body').innerHTML = rows;
使用正确的图片路径和大小
试试这个:
let itemObject = [];
itemObject.push({
item: 'Chicken soup',
description: 'Delicious creamy chicken soup',
price: 14.99,
image: 'chickensoup.jpg'
});
itemObject.push({
item: 'Chicken tacos',
description: 'Chicken taco',
price: 17.99,
image: 'chickentaco.jpg'
});
itemObject.push({
item: 'Chicken quesadilla',
description: 'Chicken quesadilla',
price: 15.75,
image: 'chickenque.jpg'
});
itemObject.push({
item: 'Chicken burrito',
description: 'Chicken burrito',
price: 22.95,
image: 'chickenburrito.jpg'
});
itemObject.push({
item: 'Chicken enchilada',
description: 'Chicken enchilada',
price: 12.55,
image: 'chickenenchilada.jpg'
});
let tbody = document.getElementById('tbody');
for (let rows of itemObject) {
let tr = document.createElement('TR');
let td, tdText;
for (let value of Object.values(rows)) {
td = document.createElement("TD");
td.appendChild(document.createTextNode(value));
tr.appendChild(td);
}
tbody.appendChild(tr);
};
<table>
<thead>
<tr>
<td>Item</td>
<td>Description</td>
<td>Price</td>
<td>Image</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
我不会展示整个代码,但这是逻辑上做到这一点的最佳方式
//JS
let array = ["item 1", "item2"];
//start a string (of html)
let htmlDisplayed = "<div id='htmlString'><ul>";
//loop each array item as a list item
for (let i=0; i< array.length; i++) {
htmlDisplayed = htmlDisplayed.concat(`<li>${array[i]}</li>`);
}
//close your html tags off
htmlDisplayed = htmlDisplayed.concat("</ul></div>");
//display it
document.getElementById("yourElement").innerHTML = htmlDisplayed;