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

标签： javascripthtmlarrayshtml-tablepopulate

Answer 1

尝试这个：

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>