<!DOCTYPE html><html><head> <title>Cart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <h1>Cart</h1> <table> <thead> <tr> <th>Product</th> <th>Quantity</th> </tr> </thead> <tbody id="cart"> </tbody> </table> <script> var cart = localStorage.getItem('cart'); if (cart) { cart = JSON.parse(cart); var cartTable = document.getElementById('cart'); for (var product in cart) { var row = document.createElement('tr'); var productCell = document.createElement('td'); productCell.textContent = product; var quantityCell = document.createElement('td'); quantityCell.textContent = cart[product]; row.appendChild(productCell); row.appendChild(quantityCell); cartTable.appendChild(row); } } else { alert('Your cart is empty'); } </script></body></html>
时间: 2023-11-16 14:54:34 浏览: 104
好的,以下是添加删除物品和更改物品数量的功能的代码示例,基于 JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Cart</h1>
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody id="cart">
</tbody>
</table>
<form>
<label for="product">Product:</label>
<input type="text" id="product" name="product" required>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" required>
<button type="submit" id="add">Add to Cart</button>
</form>
<script>
var cart = localStorage.getItem('cart');
if (cart) {
cart = JSON.parse(cart);
var cartTable = document.getElementById('cart');
for (var product in cart) {
var row = document.createElement('tr');
var productCell = document.createElement('td');
productCell.textContent = product;
var quantityCell = document.createElement('td');
quantityCell.textContent = cart[product];
var actionCell = document.createElement('td');
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function(event) {
var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent;
delete cart[product];
localStorage.setItem('cart', JSON.stringify(cart));
event.target.parentNode.parentNode.remove();
});
var editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', function(event) {
var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent;
var quantity = parseInt(prompt('Enter new quantity for ' + product + ':', cart[product]));
if (!isNaN(quantity) && quantity >= 0) {
cart[product] = quantity;
localStorage.setItem('cart', JSON.stringify(cart));
event.target.parentNode.parentNode.querySelector('td:nth-child(2)').textContent = quantity;
} else {
alert('Invalid quantity');
}
});
actionCell.appendChild(deleteButton);
actionCell.appendChild(editButton);
row.appendChild(productCell);
row.appendChild(quantityCell);
row.appendChild(actionCell);
cartTable.appendChild(row);
}
} else {
alert('Your cart is empty');
}
document.getElementById('add').addEventListener('click', function(event) {
event.preventDefault();
var product = document.getElementById('product').value;
var quantity = parseInt(document.getElementById('quantity').value);
if (product && !isNaN(quantity) && quantity >= 0) {
if (cart) {
if (cart[product]) {
cart[product] += quantity;
} else {
cart[product] = quantity;
}
} else {
cart = {};
cart[product] = quantity;
}
localStorage.setItem('cart', JSON.stringify(cart));
var cartTable = document.getElementById('cart');
var row = document.createElement('tr');
var productCell = document.createElement('td');
productCell.textContent = product;
var quantityCell = document.createElement('td');
quantityCell.textContent = cart[product];
var actionCell = document.createElement('td');
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function(event) {
var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent;
delete cart[product];
localStorage.setItem('cart', JSON.stringify(cart));
event.target.parentNode.parentNode.remove();
});
var editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', function(event) {
var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent;
var quantity = parseInt(prompt('Enter new quantity for ' + product + ':', cart[product]));
if (!isNaN(quantity) && quantity >= 0) {
cart[product] = quantity;
localStorage.setItem('cart', JSON.stringify(cart));
event.target.parentNode.parentNode.querySelector('td:nth-child(2)').textContent = quantity;
} else {
alert('Invalid quantity');
}
});
actionCell.appendChild(deleteButton);
actionCell.appendChild(editButton);
row.appendChild(productCell);
row.appendChild(quantityCell);
row.appendChild(actionCell);
cartTable.appendChild(row);
} else {
alert('Invalid product or quantity');
}
});
</script>
</body>
</html>
```
这个代码添加了一个表单,用于添加新的产品和数量,并且在现有的表格中添加了一个“操作”列,其中包括删除和编辑按钮。删除按钮删除该行中的产品,并从 localStorage 中删除该产品的条目。编辑按钮提示用户输入新数量,然后更新该产品的数量和 localStorage 条目中的值。
阅读全文