用html写一个库存管理的网页
时间: 2023-09-24 09:09:22 浏览: 78
这里提供一个简单的 HTML 网页,实现了库存管理的基本功能,包括商品列表、添加商品、编辑商品、删除商品、库存管理等功能。需要注意的是,这只是一个示例,实际项目中需要更完善的功能和逻辑处理。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>库存管理系统</title>
</head>
<body>
<h1>库存管理系统</h1>
<table>
<tr>
<th>商品名称</th>
<th>库存数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td>商品A</td>
<td>100</td>
<td>10.00</td>
<td>
<button onclick="editProduct('商品A')">编辑</button>
<button onclick="deleteProduct('商品A')">删除</button>
<button onclick="manageStock('商品A')">库存管理</button>
</td>
</tr>
<tr>
<td>商品B</td>
<td>200</td>
<td>20.00</td>
<td>
<button onclick="editProduct('商品B')">编辑</button>
<button onclick="deleteProduct('商品B')">删除</button>
<button onclick="manageStock('商品B')">库存管理</button>
</td>
</tr>
<tr>
<td>商品C</td>
<td>300</td>
<td>30.00</td>
<td>
<button onclick="editProduct('商品C')">编辑</button>
<button onclick="deleteProduct('商品C')">删除</button>
<button onclick="manageStock('商品C')">库存管理</button>
</td>
</tr>
</table>
<br>
<button onclick="addProduct()">添加商品</button>
<script>
function addProduct() {
var productName = prompt("请输入商品名称:");
var stock = prompt("请输入库存数量:");
var price = prompt("请输入单价:");
// TODO: 将商品信息添加到表格中
}
function editProduct(productName) {
var stock = prompt("请输入库存数量:");
var price = prompt("请输入单价:");
// TODO: 更新表格中对应商品的库存数量和单价
}
function deleteProduct(productName) {
// TODO: 从表格中删除对应的商品行
}
function manageStock(productName) {
var stock = prompt("请输入库存数量:");
// TODO: 更新表格中对应商品的库存数量
}
</script>
</body>
</html>
```
在这个网页中,我们使用了一个表格来展示商品的信息,其中包括商品名称、库存数量、单价和操作。每一行的操作列分别提供了编辑、删除和库存管理三个功能。点击编辑按钮会弹出一个对话框,让用户输入新的库存数量和单价,点击删除按钮会从表格中删除对应的商品行,点击库存管理按钮会弹出一个对话框,让用户输入新的库存数量。
在代码中,我们使用了 JavaScript 代码来实现这些功能。在添加商品功能中,我们使用了 `prompt()` 函数来获取用户输入的商品信息,然后需要将这些信息添加到表格中。在编辑、删除和库存管理功能中,我们需要获取对应商品行的信息,然后更新表格中对应的单元格。需要注意的是,这里我们只是简单地使用了 JavaScript 代码来实现这些功能,实际项目中需要更完善的逻辑处理和数据存储。