javascript - 如何创建使用 Javascript 数组填充 HTML 表格的循环

Question

我的任务是使用 javascript 数组填充 HTML 表格，但我在理解如何让我的数组填充实际 HTML 表格时遇到了很多麻烦。我必须创建一个包含 5 个菜单项图像、5 个菜单项描述及其 5 个价格的表格。我在下面提供了我的数组，但不知道我需要执行什么函数才能让数组填充 HTML 表。您建议我如何将它们填充到 HTML 表格中？

此外，根据作业，我必须使用数值数组来存储价格，并使用字符串数组来存储图像文件。

我想我必须执行某种“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';

Answer 1

对于初学者，我建议将数组合并为一个数组，以避免任何有关索引的错误。

标准的 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>

所以你需要一个循环来打印所有的标题。 您需要一个循环来为每个项目创建不同的行。 您需要在行循环内进行最后一个循环，以将每个单元格(食物属性)添加到行中。

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];
    }
  });
}