请写一个公告通知的页面html,里面包含增加删除修改功能
时间: 2023-12-16 12:06:13 浏览: 37
好的,以下是一个简单的公告通知页面的HTML代码,包含增加、删除和修改功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公告通知</title>
</head>
<body>
<h1>公告通知</h1>
<!-- 公告列表 -->
<table>
<thead>
<tr>
<th>标题</th>
<th>发布时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>关于本网站的通知</td>
<td>2021-08-01 10:00:00</td>
<td>
<button onclick="editNotice(1)">编辑</button>
<button onclick="deleteNotice(1)">删除</button>
</td>
</tr>
<tr>
<td>劳动节放假通知</td>
<td>2021-05-01 08:00:00</td>
<td>
<button onclick="editNotice(2)">编辑</button>
<button onclick="deleteNotice(2)">删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 添加公告表单 -->
<form id="addNoticeForm">
<h2>添加公告</h2>
<label for="title">标题:</label>
<input type="text" id="title" name="title"><br>
<label for="content">内容:</label>
<textarea id="content" name="content"></textarea><br>
<button type="button" onclick="addNotice()">提交</button>
</form>
<!-- 修改公告表单 -->
<form id="editNoticeForm">
<h2>修改公告</h2>
<input type="hidden" id="noticeId" name="noticeId">
<label for="title">标题:</label>
<input type="text" id="title" name="title"><br>
<label for="content">内容:</label>
<textarea id="content" name="content"></textarea><br>
<button type="button" onclick="updateNotice()">提交</button>
</form>
<script>
// 添加公告
function addNotice() {
// 发送 AJAX 请求,将表单数据提交到后端进行处理
// 成功后,刷新公告列表
}
// 删除公告
function deleteNotice(noticeId) {
// 发送 AJAX 请求,将公告 ID 提交到后端进行删除
// 成功后,刷新公告列表
}
// 编辑公告
function editNotice(noticeId) {
// 将公告的标题和内容填充到修改表单中
document.getElementById("noticeId").value = noticeId;
document.getElementById("title").value = "公告标题";
document.getElementById("content").value = "公告内容";
// 显示修改表单,并隐藏添加表单
document.getElementById("addNoticeForm").style.display = "none";
document.getElementById("editNoticeForm").style.display = "block";
}
// 更新公告
function updateNotice() {
// 发送 AJAX 请求,将修改后的数据提交到后端进行更新
// 成功后,刷新公告列表,并隐藏修改表单
document.getElementById("addNoticeForm").style.display = "block";
document.getElementById("editNoticeForm").style.display = "none";
}
</script>
</body>
</html>
```
以上代码包含了一个公告列表,以及添加、删除和修改公告的功能。具体实现过程中,您需要根据自己的需求和后端接口进行相应的调整。同时,为了美化页面,您可能需要添加一些CSS样式来调整页面的布局和视觉效果。