利用web前端编写一段网吧管理系统商品管理代码
时间: 2023-06-25 22:04:58 浏览: 103
以下是一个简单的网吧管理系统商品管理的前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>网吧管理系统 - 商品管理</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>商品管理</h2>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="name">商品名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入商品名称">
</div>
<div class="form-group">
<label for="price">商品价格</label>
<input type="number" class="form-control" id="price" placeholder="请输入商品价格">
</div>
<button type="submit" class="btn btn-primary">添加商品</button>
</form>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>10</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td>商品2</td>
<td>20</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td>商品3</td>
<td>30</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
```
该示例代码包含了一个简单的表单和商品列表,可以添加和删除商品。使用了 Bootstrap 框架来美化页面,并且使用了 jQuery 库来简化 JavaScript 编程。你可以根据自己的需求对该示例代码进行修改和完善。
阅读全文