如何将对象从数组显示到HTML表中

Question

enter image description here I 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.

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

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> 

Answer 1

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

link to demo: Fiddle