javascript - 如何使动态表彼此堆叠？而不是仅仅创建更多的数据单元

每次我将商品添加到购物车中时，它都会分析购物车数组中的一个对象，它会输出Item.name，item.price和item.qty，但它只是将它们链接在一起，基本上在同一张表中创建了更多数据单元格标签，如何停止此操作，并确保每个项目都在彼此之间直接新建一个表格？ （我看到此代码段内不允许使用sessionStorage）。

var shoppingCart = []; //{Product Name, Product Price}

var discountCoupon = "LINQ1234";

var vat = 1.15;

var totalCost = 0;

var delivery = 120;

var Item = function(name, price, qty){
	this.name = name;
	this.price = price;
	this.qty = qty;
};

function addItemToCart (name, price, qty) {
	var item = new Item(name, price, qty);
	shoppingCart.push(item);
	totalCost += item.price * item.qty * vat;
	sessionStorage.setItem("totalCost", JSON.stringify(totalCost));
	sessionStorage.setItem("shoppingCart", JSON.stringify(shoppingCart));
	alert("You have successfully added an item to your cart!, your current total is: R" + totalCost.toFixed(2) + " Including VAT.");
	return totalCost.toFixed(2);
};

function viewCart() { //output cart items to shopping cart HTML elements dynamically
	var cartItems = document.getElementsByClassName('cart-items')[0];
	var cart = JSON.parse(sessionStorage.getItem("shoppingCart"));
	for (var i = 0; i < cart.length; i++) {
		var a = document.createElement("td");
		a.innerHTML = cart[i].name;
		cartItems.appendChild(a);
		var b = document.createElement("td");
		b.innerHTML = cart[i].price;
		cartItems.appendChild(b);
		var c = document.createElement("td");
		c.innerHTML = cart[i].qty;
		cartItems.appendChild(c);
	}

};

.item-in-cart {
	width: 100%;
	border-collapse: collapse;
}

td, th {
  border: 1px solid #dddddd;
  padding: 15px;
}

.shoppingHeadings {
	text-align: center;
}

.cart-main-head {
	font-weight: bold;
}

.cartTotal {
	text-align: center;
}

<div class="row">
	<div class="column col-md-3 shadow p-3 mb-5 bg-white rounded shop-item">
		<h4 class="shop-item-name">Intel® Celeron® G4900</h4>
		<img class="shop-item-image" src="../Images/Celeron.gif">
		<ul class="shop-item-details">
			<li>Intel® Celeron® Processor G Series</li>
			<li>Cores : 2</li>
			<li>Threads : 2</li>
			<li>Base Frequency : 3.10GHz</li>
		</ul>
		<p class="shop-item-price">R699.00</p>
		<button class="btn btn-info btn-sm">More details</button>
		<button class="btn btn-success btn-sm" onclick="addItemToCart('Intel Celeron G4900', 699, 1)">Add to cart</button>
</div>



<div class="container jumbotron shopping-cart">

	<h2 class="shoppingHeadings">Items in your cart:</h2>

	<br>

<div class="row item-in-cart">
	<table>
		<tr>
		<th>Item Name: </th>
		<th>Item Price: </th>
		<th>Item Quantity: </th>
		<tr>
	</table>
</div>

<!--First row of actual items-->

<div>
	<table class="row cart-items">
	</table>
</div>
<br>

<div class="shopping-cart-form">
	<form>
		Discount Coupon:
		<input id="discount-input" type="text" name="discount-coupon" autocomplete="off" onchange="discountCartTotal()">
	</form><br>
	<form>
		Collection:
		<input type="radio" name="collivery" value="Collection">
		Delivery:
		<input type="radio" name="collivery" value="Delivery">
	</form><br>
<div>
    <button class="btn btn-md btn-danger" onclick="clearCart()">Clear Cart</button>
	<button class="btn btn-md btn-success" onclick="">Checkout</button>
</div><br>

<div class="cartTotal">
	<p>Your total is :</p>
</div>

</div>

<!--Ending of Main jumbotron DIV-->
</div>

最佳答案

由于您已经找到了如何将表数据动态添加到表中，因此不难理解，而是如何为每个项目添加新的表行。现在，您的代码仅将表数据添加到表中，而没有任何表行。那不会产生有效的HTML。

我为示例更改了输出表。在您的代码中，您实际上有两个表，但是我认为这不是您想要的。

我为购物车项目添加了一个示例数组，以使其在这里工作。请参阅代码示例中的注释以了解如何将表数据添加到表行中，最后将表行添加到表中。

function viewCart() {
  /*var cartItems = document.getElementsByClassName('cart-items')[0];*/
  var cartItems = document.getElementById('cart-items');

  /*var cart = JSON.parse(sessionStorage.getItem("shoppingCart"));
  to make it work here, let's use a sample array for the cart items */
  var cart = [
    {
      'name': 'item1',
      'price': 24.99,
      'qty': 1
    },
    {
      'name': 'item2',
      'price': 12.99,
      'qty': 2
    }
  ];
  for (var i = 0; i < cart.length; i++) {
    /* create a new table row */
    var tr = document.createElement("tr");

    /* create td for item name */
    var a = document.createElement("td");
    a.innerHTML = cart[i].name;
    /* add td to table row */
    tr.appendChild(a);

    /* create td for item price */
    var b = document.createElement("td");
    b.innerHTML = cart[i].price;
    /* add td to table row */
    tr.appendChild(b);

    /* create td for item qty */
    var c = document.createElement("td");
    c.innerHTML = cart[i].qty;
    /* add td to table row */
    tr.appendChild(c);

    /* add table row to table #cartItems */
    cartItems.appendChild(tr);
  }

};

table td, th {
  border: solid 1px #000;
  padding: 2px;
  text-align: right;
}

<div>
	<table id="cart-items">
		<tr>
		<th>Item Name</th>
		<th>Item Price</th>
		<th>Item Quantity</th>
		<tr>
	</table>
</div>

<button onclick="viewCart()">
  show cart
</button>

如果您确实想为每个项目添加一个新表，则其工作原理类似。