2.点击提交表单将提交的内容显示在表格的最上面(15分);提交后清空输入框的内容(5分);表单各项不允许为空(5分);原价,现价,数量必须为数字(5分);添加数据后,刷新页面表格数据不可丢失(5分);(使用localStorage)
时间: 2024-06-09 18:07:54 浏览: 15
好的,这是一个比较完整的表单操作,需要使用HTML、CSS、JavaScript和localStorage技术来实现。我可以给您提供一个参考代码,您可以根据自己的需求进行修改和优化。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理系统</title>
<style type="text/css">
body {
font-family: "Microsoft YaHei";
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
width: 800px;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-top: 0;
}
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
form label {
flex: 0 0 30%;
margin-right: 10px;
text-align: right;
}
form input[type="text"], form input[type="number"] {
flex: 0 0 60%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease-in-out;
}
form input[type="text"]:focus, form input[type="number"]:focus {
border-color: #3c8dbc;
}
form input[type="submit"] {
flex: 0 0 100%;
padding: 10px;
background-color: #3c8dbc;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
form input[type="submit"]:hover {
background-color: #367fa9;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
table th {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<h1>商品管理系统</h1>
<form id="addForm">
<label for="name">商品名称:</label>
<input type="text" id="name" name="name" required>
<label for="originalPrice">原价:</label>
<input type="number" id="originalPrice" name="originalPrice" required>
<label for="discountPrice">现价:</label>
<input type="number" id="discountPrice" name="discountPrice" required>
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" required>
<input type="submit" value="添加">
</form>
<table id="productTable">
<thead>
<tr>
<th>商品名称</th>
<th>原价</th>
<th>现价</th>
<th>数量</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: "Microsoft YaHei";
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
width: 800px;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-top: 0;
}
form {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
form label {
flex: 0 0 30%;
margin-right: 10px;
text-align: right;
}
form input[type="text"], form input[type="number"] {
flex: 0 0 60%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease-in-out;
}
form input[type="text"]:focus, form input[type="number"]:focus {
border-color: #3c8dbc;
}
form input[type="submit"] {
flex: 0 0 100%;
padding: 10px;
background-color: #3c8dbc;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
form input[type="submit"]:hover {
background-color: #367fa9;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table th, table td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
table th {
background-color: #f5f5f5;
}
```
JavaScript代码:
```
// 获取DOM元素
const addForm = document.getElementById('addForm');
const productTable = document.getElementById('productTable');
const nameInput = document.getElementById('name');
const originalPriceInput = document.getElementById('originalPrice');
const discountPriceInput = document.getElementById('discountPrice');
const quantityInput = document.getElementById('quantity');
// 初始化数据,从localStorage中读取
let products = JSON.parse(localStorage.getItem('products')) || [];
// 渲染表格数据
function renderTable() {
let html = '';
for (let i = 0; i < products.length; i++) {
html += `
<tr>
<td>${products[i].name}</td>
<td>${products[i].originalPrice}</td>
<td>${products[i].discountPrice}</td>
<td>${products[i].quantity}</td>
</tr>
`;
}
productTable.tBodies[0].innerHTML = html;
}
// 添加商品
function addProduct(e) {
e.preventDefault();
const name = nameInput.value.trim();
const originalPrice = parseFloat(originalPriceInput.value.trim());
const discountPrice = parseFloat(discountPriceInput.value.trim());
const quantity = parseInt(quantityInput.value.trim());
// 验证表单数据
if (!name || !originalPrice || !discountPrice || !quantity) {
alert('请填写完整的商品信息!');
return;
}
if (isNaN(originalPrice) || isNaN(discountPrice) || isNaN(quantity)) {
alert('原价、现价、数量必须为数字!');
return;
}
// 添加商品
const product = {
name,
originalPrice,
discountPrice,
quantity
};
products.unshift(product);
localStorage.setItem('products', JSON.stringify(products));
// 渲染表格
renderTable();
// 清空输入框
nameInput.value = '';
originalPriceInput.value = '';
discountPriceInput.value = '';
quantityInput.value = '';
}
// 绑定事件
addForm.addEventListener('submit', addProduct);
// 初始化渲染表格
renderTable();
```
以上代码实现了一个简单的商品管理系统,包括添加商品、表单验证、渲染表格数据和数据持久化等功能。您可以根据自己的需求进行修改和优化。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)