テーブルとして配列オブジェクトを表示

配列を表として表示する際に助けが必要です。私はすでに試しましたが、商品を2回追加すると、初めて追加した商品のすべての値が置き換えられます。テーブルとして配列オブジェクトを表示

これを達成するための適切な方法は何ですか？

私は、下記の関連するコード追加してい：あなたはnewProductへの参照を追加する代わりに、新しいオブジェクトを追加している（products.push(newProduct)）の製品を追加する場合

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>

出典

2017-06-28 charles

。彼らはこれに対して意味的に間違っており、ページのレイアウトに時間がかかることがあります。レイアウトにCSSを使用する必要があります。 –

@Ank拒否して申し訳ありません。ちょうど彼は同じ情報で2回の文章を2回見ました。あなたの編集は、とにかく承認されるべきです。 – FrankerZ

を。

新しい商品のプレースメントを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>

出典

2017-06-28 00:22:18 FrankerZ

これは簡単でした。ありがとうございます – charles

商品ID、商品説明、数量、価格ラベルはどのようにしてテーブルに入れられますか？ – charles

@charles：商品をループする前に、別の行を最上部に追加しますか？ – FrankerZ

テーブルレイアウトのために使用すべきではありません。彼らはこれに対して意味的に間違っており、ページのレイアウトに時間がかかることがあります。レイアウトにCSSを使用する必要があります。

さらに、多くの要素を動的に作成する場合、巨大な文字列を作成するのではなく、DOM要素を最初にメモリに作成するほうがはるかに効率的（しかも簡単です）があります。

以下の作業コードでは、HTMLとJavaScriptの量がどれくらい少なくなっているかを確認できます。

このスニペットを「フルスクリーン」で実行すると、すべてが表示されます。 FYIテーブルがレイアウトのために使用すべきではない

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>

出典

2017-06-28 00:56:26

先生、あなたは1つのテーブルにしか作れません。そんなにありがとうございます – charles

@charlesポイントはテーブルがないということです。テーブルはレイアウトに使用しないでください。しかし、はい、出力領域を移動するだけで、セクションを隣り合わせに配置することができます。私は答えを更新します。 –

さん、動作しません。フォームに値を出力しません。 – charles

テーブルとして配列オブジェクトを表示

答えて

関連する問題