-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (117 loc) · 3.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>库存管理</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
line-height: 1.2;
/* 调整文本行高，让内容更紧凑 */
}
th {
background-color: #f2f2f2;
}
input[type="text"] {
padding: 5px;
margin-bottom: 5px;
}
button {
padding: 5px 10px;
cursor: pointer;
margin-right: 5px;
}
/* 调整各列宽度的样式 */
table th:nth-of-type(1),
table td:nth-of-type(1) {
width: 150px;
/* 商品编号列宽度 */
}
table th:nth-of-type(2),
table td:nth-of-type(2) {
width: 200px;
/* 商品名称列宽度 */
}
table th:nth-of-type(3),
table td:nth-of-type(3) {
width: 120px;
/* 库存数量列宽度 */
}
table th:nth-of-type(4),
table td:nth-of-type(4) {
width: 180px;
/* 规格列宽度 */
}
table th:nth-of-type(5),
table td:nth-of-type(5) {
width: 400px;
/* 操作列宽度 */
}
table tr {
height: 30px;
/* 调整表格行高，让每一行整体变低 */
}
</style>
</head>
<body>
<div id="loginSection">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
<button onclick="login()">登录</button>
</div>
<h1>库存管理</h1>
<div id="addProductSection" style="display: none;">
<label for="productId">商品编号：</label>
<input type="text" id="productId" placeholder="请输入编号">
<label for="productName">商品名称：</label>
<input type="text" id="productName" placeholder="请输入名称">
<label for="productQuantity">库存数量：</label>
<input type="number" id="productQuantity" placeholder="请输入数量">
<label for="productSpecification">规格：</label>
<input type="text" id="productSpecification" placeholder="请输入规格">
<button onclick="addProduct()">添加商品</button>
<button onclick="sortProductsByName()">按名称排序</button>
<button onclick="sortProductsByQuantity()">按数量排序</button>
</div>
<table id="inventoryTable" style="display: none;">
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>库存数量</th>
<th>规格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 初始数据示例，后续可动态添加更多 -->
<tr>
<td>
<button onclick="editQuantity('minus', this)">减</button>
<button onclick="editQuantity('plus', this)">加</button>
<button onclick="editProduct(this)">修改商品信息</button>
<button onclick="deleteProduct(this)">删除商品</button>
</td>
</tr>
<tr>
<td>
<button onclick="editQuantity('minus', this)">减</button>
<button onclick="editQuantity('plus', this)">加</button>
<button onclick="editProduct(this)">修改商品信息</button>
<button onclick="deleteProduct(this)">删除商品</button>
</td>
</tr>
<!-- 可以继续添加更多商品行 -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>