如何将对象从数组显示到HTML表中 [英] How to display objects from array into HTML table

问题描述

在此处输入图片描述我正在处理购物车问题， HTML中的表格以在数组中输入各种对象。我想创建一个编辑按钮，以将特定的数组信息显示回表中。

enter image description hereI am working on a Shopping Cart problem and I have a table in HTML to input various objects in an Array. I want to create a "edit" button to display the specific array info back on the table.

我仅在Visual Studio Code和Javascript上工作​​。没有其他工具可以使用，因为这是我课程的基础。

I am working on just Visual Studio Code and Javascript. No other tools used as this is the fundamentals for my course.

那么我应该在editAdminFunc中编写什么代码以HTML格式显示对象？

So what should I code in editAdminFunc to display the objects in HTML?

请参阅我的代码以获取信息。

Please see my code for info.

// create a flower array
var flowerArray=[];

// declare a member object
function flower(id, name, desc, price, stock, image){
    this.id = id; //id
    this.name = name; //name
    this.desc= desc; //description
    this.price = price; //price
    this.stock = stock; //quantity
    this.image = image; //image
}

function addFlower(){
    alert("addFlower function is being triggered!");
    var newFlower = new flower(
                            document.getElementById("memId").value,
                            document.getElementById("memName").value,
                            document.getElementById("memDesc").value,
                            document.getElementById("memPrice").value,
                            document.getElementById("memStock").value,
                            document.getElementById("memImage").src,
    );
  flowerArray.push(newFlower);
  console.log(flowerArray);
}

//this function is to show the flowers in list format (for admin view)
function listFlowerFunc(){
    alert("listFlowerFunc is being triggered!");

    var displayText = "<table border=1, align = center>";
    displayText += "<tr><th>Product ID</th><th>Name</th><th>Description</th><th>Unit Price</th><th>Stock</th><th>Image</th><th>Actions</th></tr>";

    for (var i=0; i<flowerArray.length; i++){
      displayText = displayText + "<tr><td>"+flowerArray[i].id+"</td><td>"+flowerArray[i].name+"</td><td>"+flowerArray[i].desc+"</td><td>"+flowerArray[i].price+"</td><td>"+flowerArray[i].stock+"</td><td>"+flowerArray[i].src+"</td><td><button onclick =editAdminFunc()>edit</button><button onclick =deleteAdminFunc()>delete</button></td></tr>"
 
    }
        
    displayText = displayText+"</table>";

    document.getElementById("productlist").innerHTML = displayText;

}
//editAdminFunc
function editAdminFunc(i){
  alert("editAdminFunc() has been triggered!")
  document.getElementById("memId").value = "";  //to display array objects in the form
  document.getElementById("memName").value = "";
  document.getElementById("memDesc").value= "";
  document.getElementById("memPrice").value= "";
  document.getElementById("memStock").value= "";
  document.getElementById("memImage").src= "";
}

<div id="admin" align="center">
        <p>
            <button onclick='showProductForm()'>Add Products</button> | <button id ="flowerListId" onclick="listFlowerFunc()">List Products</button>
        </p>

        <div id="productlist">
        </div>

        <br>

        <div id="productForm" align="center">
            <table id = "prodTable" border ="1">
                <tr><td align="right">Product ID:</td><td><input type="text" id="memId" size="35"/></td></tr>
                <tr><td align="right">Name:</td><td><input type="text" id="memName" size="35"/></td></tr>
                <tr><td align="right">Description:</td><td><input type="text" id="memDesc" size="35"/></td></tr>
                <tr><td align="right">Unit Price($):</td><td><input type="text" id="memPrice" size="35"/></td></tr>
                <tr><td align="right">Stock:</td><td><input type="text" id="memStock" size="35"/></td></tr>
                <tr><td align="right">Image:</td><td><input  type="file" id="memImage"/></td></tr>
                <tr><td>&nbsp</td>
                    <td><button id="clearFormBtn" onclick="clearFormFunc()">Clear</button>&nbsp;&nbsp;
                        <button id="addProdBtn" onclick="addFlower()">Add</button>&nbsp;&nbsp;
                        <button id="updateProdBtn" onclick="editHtmlTableSelected()">Update</button>
                    </td></tr>   
            </table>
        </div>
    </div>

推荐答案

在javascript中创建元素的正确方法就是这样

the right way to create an element in javascript, would be something like that

<div class="some"></div>


function addElement () { 
  // create new "p" element
  var newP = document.createElement("p"); 
  // add content --  the data you want display
  var newContent = document.createTextNode("hello, how are you?"); 

  newP.appendChild(newContent); //add content inside the element. 

  // add the element and content to DOM 
  var currentDiv = document.getElementById("some"); 
  document.body.insertBefore(newP, currentDiv); 
}
addElement();

https://developer.mozilla.org/es/docs/Web/API/Document/createElement

现在，如果我们将这些信息调整到表的上下文中，我们就可以通过这种方式来动态生成数据

Now, if we adapt that information to the context of the tables, we can do it on this way to generate the data dynamically

   arr = [
  'item 1',
  'item 2',
  'item 3',
  'item 4',
  'item 5'
         ];

function addElement () { 

arr.forEach(function(el,index,array){
  let tableRef = document.getElementById('some');

  // Insert a row at the end of the table
  let newRow = tableRef.insertRow(-1);

  // Insert a cell in the row at index 0
  let newCell = newRow.insertCell(0);

  // Append a text node to the cell
  let newText = document.createTextNode(el);
  newCell.appendChild(newText);
});

}
addElement();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

演示链接：小提琴

这篇关于如何将对象从数组显示到HTML表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！