如何在不使用 jquery 的情况下使用 javascript 从数组中动态添加数据？

Question

var main = document.querySelector("#main");//SELECTION OF id//
   //Array of items//
var arr = [
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1596552183299-000ef779e88d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80",name:"Microwave",category:"electronics",price:"$300"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1588854337115-1c67d9247e4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",name:"Refrigerator",category:"electronics",price:"$500"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=890&q=80",name:"Television",category:"electronics",price:"$600"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1619017098958-57b1e2d275e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80",name:"Mobile",category:"electronics",price:"$1000"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1525825691042-e14d9042fc70?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=753&q=80",name:"Earpodes",category:"electronics",price:"$100"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",name:"Laptop",category:"electronics",price:"$2000"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",name:"Macbook",category:"electronics",price:"$10000"}
]

//显示产品列表// 函数显示（）{ 变种温度 = `; arr.forEach(function (elem,index) { 温度+= <div class="card"> <div id="circle"> <img src="${elem.img}"> </div> <div id="txt"> <h4>${elem.name}</h4> <h6>${elem.category}</h6> <h3>${elem.price}</h3> </div> <div id="btn"> <button id="${index}" class="twobtn">Cart</button> <h4>${elem.cartnumber}</h4> </div> </div> }) document.querySelector("#main").innerHTML = temp; } 功能购物车（）{ main.addEventListener('click', function (dets) { var id = dets.target.id; // if (localStorage.getItem('msgs') === null) { // updatelocalstorage(arr); // 显示（arr）； // } // 否则 {

    //         updatelocalstorage(id)
    //         show(id);
    //     }
         arr[id].cartnumber++;
        show();
    })
}
//inserting data in table for bill//
function showbill() {
   
    main.addEventListener('click', function (dets) {
        var template = ``;
        if ((dets.target.id) === arr[dets.target.id]) {
           
        }
        else {
             arr.forEach(function (elem) {
                template += ` <tr>
                    <td>1</td>
                    <td>${elem.name}</td>
                    <td>1</td>
                    <td>${elem.price}</td>
                </tr>`
            })
            document.querySelector("table").innerHTML = template;
        }
         })
    }

Answer 1

这是一个使用 vanilla javascript 将数组数据添加到表中的示例。我编写了一个函数来将给定数组中的对象转换为tr 元素。然后，我只是循环遍历数组中的所有项目，并将每一行放到表元素上。根据您希望样式的外观，有很多选项可以显示图像。

希望这会有所帮助?

const $ = str => [...document.querySelectorAll(str)];

var arr = [
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1596552183299-000ef779e88d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80",name:"Microwave",category:"electronics",price:"$300"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1588854337115-1c67d9247e4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",name:"Refrigerator",category:"electronics",price:"$500"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=890&q=80",name:"Television",category:"electronics",price:"$600"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1619017098958-57b1e2d275e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80",name:"Mobile",category:"electronics",price:"$1000"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1525825691042-e14d9042fc70?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=753&q=80",name:"Earpodes",category:"electronics",price:"$100"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",name:"Laptop",category:"electronics",price:"$2000"},
    {cartnumber:"0", img:"https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",name:"Macbook",category:"electronics",price:"$10000"}
]

function itemToRow(item) {
  const tr = document.createElement("tr");
  
  const imgTd = document.createElement("td");
  imgTd.style.cssText += `
    background-image: url(${item.img});
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  `;
  tr.appendChild(imgTd);
  
  const cartNumberTd = document.createElement("td");
  cartNumberTd.textContent = item.cartnumber;
  tr.appendChild(cartNumberTd);
  
  const priceTd = document.createElement("td");
  priceTd.textContent = item.price;
  tr.appendChild(priceTd);
  
  const nameTd = document.createElement("td");
  nameTd.textContent = item.name;
  tr.appendChild(nameTd);
  
  const categoryTd = document.createElement("td");
  categoryTd.textContent = item.category;
  tr.appendChild(categoryTd);
  
  return tr;
}


const table = $("tbody")[0];
for (item of arr) {
  const tr = itemToRow(item);
  table.appendChild(tr);
}

td, th {
  border: 1px solid black;
  padding: 0.5rem;
  min-height: 3rem;
  min-width: 3rem;
}

table {
  border-collapse: collapse;
}

<table>
  <thead>
    <th>Img</th>
    <th>Cart #</th>
    <th>Price</th>
    <th>Name</th>
    <th>Department</th>
  </thead>
  <tbody>
  </tbody>
</table>