将数组对象显示为表

时间：2017-06-28 00:18:46

标签： javascript html arrays html-table javascript-objects

我需要帮助将数组显示为表格。我已经尝试了但是如果我第二次添加产品，它会替换我第一次添加的产品的所有值。

实现这一目标的正确方法是什么？

我在下面添加相关代码：

＆＃13;
＆＃13; 
 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);
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

添加产品（products.push(newProduct)）时，您需要添加对newProduct的引用，而不是添加新对象。

将newProduct展示位置移动到addProduct函数中，以便每次都显式创建一个新对象。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

表格不应用于布局目的。它们在语义上是不正确的，它们可能需要更长的时间才能在页面上进行布局。 CSS应该用于布局。

此外，当你动态创建大量元素时，首先在内存中创建这些DOM元素也可以更高效（并且更容易），而不是构建庞大的字符串。

您可以在下面的工作代码中看到有多少HTML和JavaScript。

您可能需要运行此片段＆＃34;全屏＆＃34;看到这一切。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
* { 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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题