html写一个计划列表增删查改的模板
时间: 2023-06-15 08:04:58 浏览: 87
以下提供一份简易的HTML计划列表增删查改的模板,仅供参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计划列表</title>
</head>
<body>
<h1>计划列表</h1>
<!-- 显示计划列表 -->
<ul id="plan-list">
<li>计划1</li>
<li>计划2</li>
<li>计划3</li>
</ul>
<!-- 添加计划表单 -->
<form id="add-plan-form">
<label for="new-plan">添加新计划:</label>
<input type="text" id="new-plan" name="new-plan" required>
<button type="submit">添加</button>
</form>
<!-- 修改计划表单 -->
<form id="edit-plan-form" style="display:none;">
<label for="edit-plan">修改计划:</label>
<input type="text" id="edit-plan" name="edit-plan" required>
<button type="submit">保存</button>
<button type="button" id="cancel-edit">取消</button>
</form>
<!-- 删除计划表单 -->
<form id="delete-plan-form" style="display:none;">
<label>确定删除计划?</label>
<button type="submit">删除</button>
<button type="button" id="cancel-delete">取消</button>
<input type="hidden" id="delete-plan-index" name="delete-plan-index">
</form>
<script>
// 获取计划列表元素
const planList = document.getElementById("plan-list");
// 添加计划表单的事件处理程序
document.getElementById("add-plan-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 添加新计划到计划列表
const newPlan = document.getElementById("new-plan").value.trim();
const newPlanElement = document.createElement("li");
newPlanElement.textContent = newPlan;
planList.appendChild(newPlanElement);
// 清空表单数据
document.getElementById("new-plan").value = "";
});
// 修改计划表单的事件处理程序
document.getElementById("edit-plan-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 更新选中计划的文本内容
const editPlan = document.getElementById("edit-plan").value.trim();
const editPlanElement = planList.children[editPlanIndex];
editPlanElement.textContent = editPlan;
// 显示添加计划表单,隐藏修改和删除计划表单
document.getElementById("add-plan-form").style.display = "block";
document.getElementById("edit-plan-form").style.display = "none";
document.getElementById("delete-plan-form").style.display = "none";
// 清空表单数据
document.getElementById("edit-plan").value = "";
});
// 取消修改计划的事件处理程序
document.getElementById("cancel-edit").addEventListener("click", function(event) {
event.preventDefault(); // 阻止默认行为
// 显示添加计划表单,隐藏修改和删除计划表单
document.getElementById("add-plan-form").style.display = "block";
document.getElementById("edit-plan-form").style.display = "none";
document.getElementById("delete-plan-form").style.display = "none";
});
// 删除计划表单的事件处理程序
document.getElementById("delete-plan-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 删除选中计划
const deletePlanElement = planList.children[deletePlanIndex];
planList.removeChild(deletePlanElement);
// 显示添加计划表单,隐藏修改和删除计划表单
document.getElementById("add-plan-form").style.display = "block";
document.getElementById("edit-plan-form").style.display = "none";
document.getElementById("delete-plan-form").style.display = "none";
});
// 取消删除计划的事件处理程序
document.getElementById("cancel-delete").addEventListener("click", function(event) {
event.preventDefault(); // 阻止默认行为
// 显示添加计划表单,隐藏修改和删除计划表单
document.getElementById("add-plan-form").style.display = "block";
document.getElementById("edit-plan-form").style.display = "none";
document.getElementById("delete-plan-form").style.display = "none";
});
// 为计划列表中的计划元素添加点击事件处理程序
for (let i = 0; i < planList.children.length; i++) {
const planElement = planList.children[i];
planElement.addEventListener("click", function(event) {
event.preventDefault(); // 阻止默认行为
// 显示修改计划表单
const editPlanInput = document.getElementById("edit-plan");
editPlanInput.value = planElement.textContent;
const editPlanForm = document.getElementById("edit-plan-form");
editPlanForm.style.display = "block";
// 隐藏添加计划表单
const addPlanForm = document.getElementById("add-plan-form");
addPlanForm.style.display = "none";
// 将修改和删除计划表单的计划索引设置为当前选中计划的索引值
document.getElementById("delete-plan-index").value = i;
editPlanIndex = i;
});
}
</script>
</body>
</html>