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

Question

每次我将一个元素添加到我的购物车中时，它会解析购物车数组中的一个对象，它会输出 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>

Answer 1

既然你已经了解了如何动态地向表格中添加表格数据，那么就不难理解，如何为每个元素添加一个新的表格行。现在，您的代码仅将表数据添加到表中，而没有任何表行。那不会产生有效的 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>

如果您真的想为每个元素添加一个新表，那将以类似的方式工作。