JavaScript实现备忘录的增删改操作-海口c网

JavaScript实现备忘录的增删改操作

article/2025/6/26 1:15:29

最终实现目标效果：

添加任务：用户输入内容后点击“add”，创建包含任务和操作按钮的新行。每个任务分配唯一index标识（通过flag自增实现）。
标记完成/未完成：点击“mark”切换任务文本的中划线样式和颜色。
更新任务：点击“update”将任务内容回填到输入框，进入编辑模式，保存后更新原任务。
删除任务：仅允许删除已标记完成的任务，需二次确认。

备忘录增删改操作

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格增删改查</title><link rel="stylesheet" href="style.css"><script src="javascript.js" defer></script></head>
<body><div class="container"><div class="addbox"><input type="text" class="text"><input type="button" class="add" value="add"></div><table border="1"><thead><tr><td>事项</td><td width="150">操作</td></tr></thead><tbody><!-- <tr><td>学习</td><td><input type="button" class="mark" value="mark"><input type="button" class="update" value="update"><input type="button" class="delete" value="delete"></td></tr><tr><td>学习</td><td><input type="button" class="mark" value="mark"><input type="button" class="update" value="update"><input type="button" class="delete" value="delete"></td></tr><tr><td>学习</td><td><input type="button" class="mark" value="mark"><input type="button" class="update" value="update"><input type="button" class="delete" value="delete"></td></tr> --></tbody></table></div>
</body>
</html>

CSS 部分

*{padding: 0;margin: 0;
}
.container{width: 25%;margin: 100px auto;min-width: 230px;
}.container .addbox{display: flex;/* 一左一右 */justify-content: space-between;align-items: center;
}.container .addbox .text{width: 85%;padding: 6px 10px;border:2px solid #910000;/* 去掉轮廓 */outline: none;/* 圆角 */border-radius: 5px 0px 0px 5px;
}.container .addbox .add{width: 15%;padding: 7.6px 10px;background: #910000;border:0px;color: white;border-radius: 0px 5px 5px 0px;/* 鼠标样式 */cursor: pointer;
}
.container .addbox .add:hover{background: #4f1010;
}
table {width: 100%;margin-top: 10px;/* 设置边框是否合用 */border-collapse: collapse;border:1px solid #fff;
}/* 右侧居中 */
table tr td:nth-child(2) {text-align: center;
}
table thead tr{background: #910000;color: white;font-size: 14px;}
table thead tr td{padding: 4px 5px;font-size: 15px;font-weight: 430;
}
table tbody tr{background: #f7f5f5;
}table tbody tr:nth-child(odd){background: #e4e2e2;
}
table tbody tr td{padding: 3px 5px;font-size: 14px;font-weight: 350;
}table tbody input{/* 鼠标样式 */border-radius: 3px;cursor: pointer;background:none;color: #910000;font-size: 13px;border:1.7px solid #910000;padding: 3px;
}

备忘录样式：
在这里插入图片描述

JavaScript 部分

//创建
var add = document.querySelector(".add")
var text = document.querySelector(".text")
var tbody = document.querySelector("tbody")
var flag = 0
var targetadd.onclick = function () {//修改if(add.value == "update"){var tds = document.querySelectorAll("tbody tr td:nth-child(1)") for(var i = 0;i<tds.length;i++){if(tds[i].getAttribute("index") == target){tds[i].innerText = text.valuetext.value = ""add.value = "add"}}return}//获取输入框里的内容if (text.value.trim()) {//创建一行元素var tr = document.createElement("tr")var td1 = document.createElement("td")var td2 = document.createElement("td")td1.setAttribute("index",flag)flag++td1.innerText = text.value.trim()td2.innerHTML = '<input type="button" value="mark" class="mark"> ' +'<input type="button" value="update" class="update"> '+'<input type="button" value="delete" class="delete"> 'tr.appendChild(td1)tr.appendChild(td2)tbody.appendChild(tr)//给输入框值设置为空text.value = ""} else {alert("请输入内容")}//完成var marks = document.querySelectorAll(".mark")for (var i = 0; i < marks.length; i++) {marks[i].onclick = function () {var mark_td = this.parentElement.previousElementSiblingif (mark_td.style.textDecoration == 'line-through') {mark_td.style.textDecoration = "none"mark_td.style.color = "#000"} else {mark_td.style.textDecoration = "line-through"mark_td.style.color = "#888"}}}//删除var del = document.querySelectorAll(".delete")for (var i = 0; i < del.length; i++) {del[i].onclick = function () {if (this.parentElement.previousElementSibling.style.textDecoration == 'line-through') {if (confirm("确定删除吗？")) {var delete_tr = this.parentElement.parentElementdelete_tr.parentElement.removeChild(delete_tr)}} else {alert("请先完成")}}}//回显var updates = document.querySelectorAll(".update")for (var i = 0; i < updates.length; i++) { updates[i].onclick = function () {var update_td = this.parentElement.previousElementSiblingif(update_td.style.textDecoration == 'line-through'){text.value = ""add.value = "add"alert("已经完成啦")}else{text.value = update_td.innerTextadd.value = "update"target = update_td.getAttribute("index")}}}
}