JavaScript中todolist操作--待办事项的添加 删除 完成功能
效果图
在文本框中输入内容点击添加按钮会在下面生成
添加功能
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/todolist.js" defer></script><style>* {padding: 0;margin: 0;}.container {width: 25%;margin: 100px auto;min-width: 260px;}.container>div {display: flex;margin-bottom: 10px;}.container>div .content {width: 85%;/* 外轮廓去掉 */outline: none;padding: 3px 10px;border: 2px solid rgb(165, 41, 31);border-radius: 6px 0 0 6px;}.container>div .add {width: 15%;padding: 3px;background: rgb(165, 41, 31);color: #fff;border: none;border-radius: 0 6px 6px 0;cursor: pointer;}table {width: 100%;text-align: center;border-collapse: collapse;border: #fff 2px solid;}table thead tr {background: rgb(165, 41, 31);color: #fff;}table thead tr th {padding: 4px;font-size: 14px;}table tbody tr {background: #ddd;font-size: 13px;}table tbody tr:nth-child(even) {background: #eee;}table tbody tr td {padding: 4px;}table tbody tr input {border: 1px solid rgb(165, 41, 31);background: none;color: rgb(165, 41, 31);font-size: 12px;padding: 2px 5px;cursor: pointer;border-radius: 4px;}table tbody tr input:hover {box-shadow: 2px 2px 2px rgb(165, 41, 31);}</style>
</head>
<body><div class="container"><div><input type="text" class="content"><input type="button" value="添加" class="add"></div><table border="1"><thead><tr><th>待办事项</th><th>操作</th></tr></thead><tbody></tbody></table></div>
</body>
</html>js
//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{ //trim()去掉字符串前后空格 防止全输入空格也会添加if(content.value.trim()){var tr=document.createElement("tr")var td1=document.createElement("td")var td2=document.createElement("td")td1.innerText=content.valuetd2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" value="完成">'tr.appendChild(td1)tr.appendChild(td2)//添加元素要用父级元素添加子级元素tbody.appendChild(tr)content.value=""//添加之后文本框变为空}
}完成功能
点击完成之后事项加中划线 颜色变灰
注意这个功能要写在添加里面
删除 修改等功能同理
因为只有实现添加之后才会出现按钮
//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{ //trim()去掉字符串前后空格 防止全输入空格也会添加if(content.value.trim()){var tr=document.createElement("tr")var td1=document.createElement("td")var td2=document.createElement("td")td1.innerText=content.valuetd2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" class="finish" value="完成">'tr.appendChild(td1)tr.appendChild(td2)tbody.appendChild(tr)content.value=""}var finish=document.getElementsByClassName("finish")//找到完成这个按钮以绑定事件for(var j=0;j<finish.length;j++){finish[j].onclick=function(){var target=this.parentElement.previousElementSibling//this是一个按钮 父级是td 父级的前一个也是td 就是输入的内容target.style.color="#999" target.style.textDocration="line-through"}}
}对完成功能的改善 增加合理性
var finish=document.getElementsByClassName("finish")for(var j=0;j<finish.length;j++){finish[j].onclick=function(){ var target=this.parentElement.previousElementSiblingif(target.style.textDocration=="line-through"){ this.value="完成"target.style.color="#000" target.style.textDocration="none"}else{ this.value="撤销"target.style.color="#999" target.style.textDocration="line-through"}console.log(target.style.textDocration)}}
删除功能
//删除var deletes=document.getElementsByClassName("delete")for(var k=0;k<deletes.length;k++){deletes[k].onclick=function(){ //如果是完成的才能删 未完成不能删if(this.parentElement.previousElementSibling.style.textDocration=="line-through"){tbody.removeChild(this.parentElement.parentElement)}else{alert("继续努力吧")}//点击这个按钮的父级是三个按钮被包含的td 再父级是tr//tr包含三个按钮和待办事项的值 所以要把整个tr删了//找到tr的父级tbody调用方法就可以删除}}修改功能
//查找修改按钮var update = document.getElementsByClassName("update")for (var j = 0; j < update.length; j++) {//回显update[j].onclick = function() {var target = this.parentElement.previousElementSibling//如果该事项已经完成，则不做修改if (target.style.textDecoration == "line-through") {alert("事情已经完成，无需修改")} else {content.value = target.innerTextadd.value = "修改"flag = 1num = target.getAttribute("index")}}if (flag == 1) {var tds = document.querySelectorAll("tbody tr td:nth-child(1)")for (var j = 0; j < tds.length; j++) {if (tds[j].getAttribute("index") == num) {// 相等则进行修改tds[j].innerText = content.valuecontent.value = ""add.value = "添加"flag = 0}}return}
全部代码
var add = document.querySelector(".add")
var content = document.querySelector(".content")
var tbody = document.querySelector("tbody")//标志变量 0添加 1修改
var flag = 0
var index = 0//记录当前被修改的是哪条信息
var numadd.onclick = function() {//修改if (flag == 1) {var tds = document.querySelectorAll("tbody tr td:nth-child(1)")for (var j = 0; j < tds.length; j++) {if (tds[j].getAttribute("index") == num) {// 相等则进行修改tds[j].innerText = content.valuecontent.value = ""add.value = "添加"flag = 0}}return}// trim()去掉字符串前后的空格//添加if (content.value.trim()) {var tr = document.createElement("tr")var td1 = document.createElement("td")//给单元格绑定属性td1.setAttribute("index", index)index++var td2 = document.createElement("td")td1.innerText = content.valuetd2.innerHTML = '<input type="button" value="删除" class="delete"> <input type="button" value="修改" class="update"> <input type="button" value="完成" class="finish">'tr.appendChild(td1)tr.appendChild(td2)tbody.appendChild(tr)content.value = ""}//查找完成按钮var finish = document.getElementsByClassName("finish")for (var j = 0; j < finish.length; j++) {finish[j].onclick = function() {var target = this.parentElement.previousElementSiblingif (target.style.textDecoration == "line-through") {target.style.color = "#000"target.style.textDecoration = "none"this.value = "完成"} else {this.value = "撤销"target.style.color = "#999"target.style.textDecoration = "line-through"}}}//查找删除按钮var deletes = document.getElementsByClassName("delete")for (var j = 0; j < deletes.length; j++) {deletes[j].onclick = function() {console.log(this.parentElement.previousElementSibling.style.textDecoration)//如果是完成了，删除，如果没有完成不允许删除if (this.parentElement.previousElementSibling.style.textDecoration == "line-through") {//删除一行tbody.removeChild(this.parentElement.parentElement)} else {alert("努力完成吧")}}}//查找修改按钮var update = document.getElementsByClassName("update")for (var j = 0; j < update.length; j++) {//回显update[j].onclick = function() {var target = this.parentElement.previousElementSibling//如果该事项已经完成，则不做修改if (target.style.textDecoration == "line-through") {alert("事情已经完成，无需修改")} else {content.value = target.innerTextadd.value = "修改"flag = 1num = target.getAttribute("index")}}}
}