用html5写一个商品库存查询页面。共2个商品,每页1个商品,每一项数据显示商品,名称、价格、库存数量,商品明细添加一个“详情”按钮,用户可以点击该按钮查看商品的详细信息。顶部合计所有数量、金额。底部可以切换页面,可以显示总页数,点击可以跳转最后一页,给出示例代码
时间: 2024-05-24 22:13:41 浏览: 90
很高兴为您解答问题!以下是示例代码:
<!DOCTYPE html>
<html>
<head>
<title>商品库存查询</title>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1>商品库存查询</h1>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>库存数量</th>
<th>详情</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>$10.00</td>
<td>50</td>
<td><button onclick="alert('商品1的详细信息')">详情</button></td>
</tr>
<tr>
<td>商品2</td>
<td>$20.00</td>
<td>100</td>
<td><button onclick="alert('商品2的详细信息')">详情</button></td>
</tr>
</tbody>
</table>
<p>合计:总数量 150,总金额 $30.00</p>
<div>
<button>上一页</button>
<button>1</button>
<button>2</button>
<button>下一页</button>
<p>共2页</p>
<button>跳转到最后一页</button>
</div>
</body>
</html>
希望能够帮助到您,如有疑问请随时提出。