1

I need help in displaying array as a table. I already tried it but if I add the product second time, it replaces all the values of the product that I added in the first time.

What is the proper way to achieve this?

I am adding relevant code below:

 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>

Brian Tompsett - 汤莱恩
5,92772 gold badges63 silver badges135 bronze badges
asked Jun 28, 2017 at 0:18
2
  • FYI Tables should not be used for layout purposes. They are semantically incorrect for this and they can take longer to layout on the page. CSS should be used for layout. Commented Jun 28, 2017 at 0:27
  • @Ank Sorry for the rejection. Just saw he had 2 sentences twice with the same info. Your edit should be approved anyway. Commented Jun 28, 2017 at 0:31

2 Answers 2

1

When adding products (products.push(newProduct)) you're adding a reference to newProduct instead of adding a new object.

Move your newProduct placement into your addProduct function to explicitly create a new object each time.

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>

answered Jun 28, 2017 at 0:22
Sign up to request clarification or add additional context in comments.

4 Comments

How will I put the label Product ID, Product Description, Quantity and Price in the table?
@charles: Add another row right at the top before you loop through the products?
How about when i want to add the this <button type="button" onClick="editProduct();"/>Edit</button> on every product beside the price. How should i write this?
@charles, come on man. This is simple javascript (Google around how to use concatenating): html+="<td><button type="button" onClick="editProduct()" /></td>";. If you're going to ask how do I edit "this" product, and have it update the quantities and stuff, then you're likely over your head, and I would pass this project onto someone else with more javascript skills. You're likely going to need to either use a binding library, or create a dictionary and update the values when a product gets changed.
0

Tables should not be used for layout purposes. They are semantically incorrect for this and they can take longer to layout on the page. CSS should be used for layout.

Additionally, when you have a great deal of elements being created dynamically, it can also be much more efficient (and a great deal easier) to create those DOM elements in memory first, rather than building up huge strings.

You can see in the working code below how much less HTML and JavaScript there is.

You'll probably have to run this snippet "full screen" to see it all.

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>

answered Jun 28, 2017 at 0:56

3 Comments

Sir, can you make it into one table only. Thank you so much sir
@charles The point is that there are no tables. Tables should not be used for layout. But, yes, the sections can be placed next to each other by simply moving the output area. I'll update the answer.
sir, its not working. It doesn't output the value in the form.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.