用HTML写一个建设工程监管信息系统项目信息列表显示与添加页面
时间: 2024-10-27 16:11:59 浏览: 8
基于JSP+Servlet+Mysql的建设工程监管信息
5星 · 资源好评率100%
在HTML中创建一个建设工程监管信息系统项目信息列表显示与添加页面,可以分为两部分:展示已有的项目列表和提供新项目的添加表单。这里是一个简单的示例:
1. **列表显示(项目列表页)**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>建设工程监管信息系统 - 项目列表</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}
</style>
</head>
<body>
<h2>建设工程监管项目列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>项目名称</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用JavaScript动态填充数据 -->
<!-- 这里仅作示例,实际应用需要通过服务器获取 -->
<tr id="project-row-1">
<td>1</td>
<td>项目A</td>
<td>进行中</td>
<td><a href="#" class="edit">编辑</a> | <a href="#" class="delete">删除</a></td>
</tr>
<!-- ... 更多行 ... -->
</tbody>
</table>
</body>
</html>
```
2. **添加表单(添加新项目页或模态框)**:
```html
<!-- 添加新项目表单 -->
<div id="add-project-form" style="display:none;">
<form>
<label for="name">项目名称:</label>
<input type="text" id="name" name="name"><br>
<label for="status">状态:</label>
<select id="status" name="status">
<option value="新建">新建</option>
<option value="进行中">进行中</option>
<option value="完成">完成</option>
</select><br>
<input type="submit" value="添加">
</form>
</div>
<button onclick="showAddForm()">+ 添加新项目</button>
<script>
function showAddForm() {
document.getElementById('add-project-form').style.display = "block";
}
// 提交表单时需连接到后端处理
</script>
```
阅读全文