将数组对象显示为表
[英]Display array objects as table
问题描述
我需要帮助将数组显示为表格。 我已经尝试了但是如果我第二次添加产品，它会替换我第一次添加的产品的所有值。
实现这个目标的正确方法是什么？
我在下面添加相关代码：
var qtyTotal = 0; var priceTotal = 0; var products = []; var newProduct = { product_id : null, product_desc : null, product_qty : 0, product_price : 0.00, }; function addProduct() { var productID = document.getElementById("productID").value; var product_desc = document.getElementById("product_desc").value; var qty = document.getElementById("quantity").value; // qtyTotal = qtyTotal + parseInt(qty); //document.getElementById("qtyTotals").innerHTML=qtyTotal; var price = document.getElementById("price").value; newProduct.product_id = productID; newProduct.product_desc = product_desc; newProduct.product_qty = qty; newProduct.product_price = price; products.push(newProduct); //console.log("New Product " + JSON.stringify(newProduct)) //console.log("Products " + JSON.stringify(products)) var html = "<table border='1|1' >"; for (var i = 0; i < products.length; i++) { html+="<tr>"; html+="<td>"+products[i].product_id+"</td>"; html+="<td>"+products[i].product_desc+"</td>"; html+="<td>"+products[i].product_qty+"</td>"; html+="<td>"+products[i].product_price+"</td>"; html+="</tr>"; } html+="</table>"; document.getElementById("demo").innerHTML = html; document.getElementById("resetbtn").click() } function deleteProduct(node){ r=node.parentNode.parentNode; r.parentNode.removeChild(r); }
<!DOCTYPE html> <html> <head> <title>Shopping Cart Pure Javascript</title> </head> <body> <form name="order" id="order"> <table> <tr> <td> <label for="productID">Product ID:</label> </td> <td> <input id="productID" name="product" type="text" size="28" required/> </td> </tr> <tr> <td> <label for="product">Product Desc:</label> </td> <td> <input id="product_desc" name="product" type="text" size="28" required/> </td> </tr> <tr> <td> <label for="quantity">Quantity:</label> </td> <td> <input id="quantity" name="quantity" width="196px" required/> </td> </tr> <tr> <td> <label for="price">Price:</label> </td> <td> <input id="price" name="price" size="28" required/> </td> </tr> </table> <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > </form> <br> <p id="demo"></p> </body> </html>
2 个解决方案
解决方案1
0 已采纳 2017-06-28 00:22:18
添加产品（ products.push(newProduct) ）时，您要添加对newProduct的引用，而不是添加新对象。
将newProduct展示位置移动到addProduct函数中，以便每次都显式创建一个新对象。
var qtyTotal = 0; var priceTotal = 0; var products = []; function addProduct() { var productID = document.getElementById("productID").value; var product_desc = document.getElementById("product_desc").value; var qty = document.getElementById("quantity").value; // qtyTotal = qtyTotal + parseInt(qty); //document.getElementById("qtyTotals").innerHTML=qtyTotal; var price = document.getElementById("price").value; var newProduct = { product_id : null, product_desc : null, product_qty : 0, product_price : 0.00, }; newProduct.product_id = productID; newProduct.product_desc = product_desc; newProduct.product_qty = qty; newProduct.product_price = price; products.push(newProduct); //console.log("New Product " + JSON.stringify(newProduct)) //console.log("Products " + JSON.stringify(products)) var html = "<table border='1|1' >"; for (var i = 0; i < products.length; i++) { html+="<tr>"; html+="<td>"+products[i].product_id+"</td>"; html+="<td>"+products[i].product_desc+"</td>"; html+="<td>"+products[i].product_qty+"</td>"; html+="<td>"+products[i].product_price+"</td>"; html+="</tr>"; } html+="</table>"; document.getElementById("demo").innerHTML = html; document.getElementById("resetbtn").click() } function deleteProduct(node){ r=node.parentNode.parentNode; r.parentNode.removeChild(r); }
<!DOCTYPE html> <html> <head> <title>Shopping Cart Pure Javascript</title> </head> <body> <form name="order" id="order"> <table> <tr> <td> <label for="productID">Product ID:</label> </td> <td> <input id="productID" name="product" type="text" size="28" required/> </td> </tr> <tr> <td> <label for="product">Product Desc:</label> </td> <td> <input id="product_desc" name="product" type="text" size="28" required/> </td> </tr> <tr> <td> <label for="quantity">Quantity:</label> </td> <td> <input id="quantity" name="quantity" width="196px" required/> </td> </tr> <tr> <td> <label for="price">Price:</label> </td> <td> <input id="price" name="price" size="28" required/> </td> </tr> </table> <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > </form> <br> <p id="demo"></p> </body> </html>
解决方案2
0 2017-06-28 00:56:26
表格不应用于布局目的。 它们在语义上是不正确的，它们可能需要更长的时间才能在页面上进行布局。 CSS应该用于布局。
此外，当您动态创建大量元素时，首先在内存中创建这些DOM元素（而不是构建大量字符串）也会更加高效（并且更加容易）。
您可以在下面的工作代码中看到有多少HTML和JavaScript。
您可能必须运行此片段“全屏”才能看到所有内容。
var qtyTotal = 0; var priceTotal = 0; var products = []; // Global counter to keep id's unique var counter = 1; function addProduct() { var demo = document.getElementById("demo"); // Get original product section var original = document.getElementById("template"); // Copy the original var newSection = original.cloneNode(true); // Update id's so that they are unique newSection.querySelector("#productID").id = "product" + counter; newSection.querySelector("#product_desc").id = "product_desc" + counter; newSection.querySelector("#quantity").id = "quantity" + counter; newSection.querySelector("#price").id = "price" + counter; // Increase counter for next product counter++; // Append the new section to the document demo.appendChild(newSection); // Create a new product with values from the "template" section var newProduct = { product_id :document.getElementById("productID").value, product_desc : document.getElementById("product_desc").value, product_qty : document.getElementById("quantity").value, product_price : document.getElementById("price").value, }; // Add object to array products.push(newProduct); // Test console.log(products); // Reset form document.getElementById("resetbtn").click(); } function deleteProduct(node){ r = node.parentNode.parentNode; r.parentNode.removeChild(r); }
* { box-sizing: border-box; } .row > label { display:inline-block; width:25%; } .row > input { display:inline-block; width:74%; } .product { border:2px solid grey; padding:3px; }
<form name="order" id="order"> <div class="product" id="template"> <div class="row"> <label for="productID">Product ID:</label> <input id="productID" name="product" type="text" size="28" required/> </div> <div class="row"> <label for="product">Product Desc:</label> <input id="product_desc" name="product" type="text" size="28" required/> </div> <div class="row"> <label for="quantity">Quantity:</label> <input id="quantity" name="quantity" width="196px" required/> </div> <div class="row"> <label for="price">Price:</label> <input id="price" name="price" size="28" required/> </div> </div> <p id="demo"></p> <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > </form> <br>
映射包含另一个带有对象的数组的数组，并将它们显示在 javascript 的表格中
[英]Map array containing another array with objects and display them in a table in javascript
如何创建一个 html 表来显示具有不同字段的对象数组？
[英]How to create an html table to display an array of objects with not the same fields?
Vue：如何在表中显示嵌套对象数组的每个“叶子”？
[英]Vue: How to display each “leaf” of an array of nested objects in a table?
如何动态计算给定对象数组的行跨度以显示表格
[英]how to dynamically calculate row span for the given array of objects to display table
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.