如何在不使用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"}
    ]
//showing product list //
    function show() {
        var temp = ``;
        arr.forEach(function (elem,index) {
        temp+=`  <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;
    }
    function cart() {
        main.addEventListener('click', function (dets) {
            var id = dets.target.id;
        //     if (localStorage.getItem('msgs') === null) {
        //         updatelocalstorage(arr);
        // show(arr);
        //     }
        //     else {
               
        //         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

这是使用普通 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>