前端——JavaScript练习做一个todoList

用前端制作一个todoList的表格，实现更新、删除、修改等功能。

涉及几个知识点：

设置最小高度（宽度）：

.container{min-width: 350px;/* 最小宽度 最小不会小于210px */        
}

去掉外轮廓

 outline: none;

去除字符串两端的空白字符（包括空格、制表符、换行符等）

info.value.trim()

previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

var target=this.parentElement.previousElementSibling

confirm 询问

if(confirm("是否删除该事件？")){target.parentElement.removeChild(target)
}

最终结果显示：

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.container{width: 10%;min-width: 350px;/* 最小宽度 最小不会小于210px *//* background: blanchedalmond; */margin: 150px auto;}.container .addBox{display: flex;}.container .addBox .info{width: 80%;border: 2px solid burlywood;outline: none;/* 去掉外轮廓 */padding: 5px;cursor: pointer;border-radius: 10%;}.container .addBox .botton{width: 15%;background: rgb(157, 110, 202);color: #ffffff;padding: 5px;border-radius: 10px;}.container .addBox .botton:hover{opacity:0.8;}table{margin-top: 15px;width: 100%;border-collapse: collapse;}table thead tr{font-size: 15px;padding: 5px;background:rgb(155, 69, 192) ;color: #ffffff;}table tbody tr:nth-child(odd){background: rgb(212, 174, 198);}table tbody tr:nth-child(even){background: rgb(208, 174, 220);}table tbody tr td{padding: 5px;font-size: 15px;text-align: center;}table tbody tr td input{background: none;border: rgb(155, 69, 192) 3px solid;color: rgb(255, 255, 255);border-radius: 3px;cursor: pointer;}table tbody tr td input:hover{box-shadow: 1px 2px 1px rgb(233, 230, 216);}/* table thead tr td{text-decoration: line-through;} */</style><script>window.onload=function(){// 获取元素var botton= document.querySelector(".botton")var info= document.querySelector(".info")var tbody=document.querySelector("tbody")// 表格行的起始位置值是0var rowindex=0// 当前要修改的行的值var updateIndex// 给add按钮绑定事件botton.onclick=function(){if(updateIndex){// 修改var trs=document.querySelectorAll("table tbody tr")for(var l=0;l<trs.length;l++){if(trs[l].getAttribute("index")==updateIndex){if(info.value){trs[l].firstElementChild.innerText=info.valueinfo.value=""botton.value="add"updateIndex=undefined}else{alert("不能为空")}}}return}// console.log(info.value)if(info.value.trim()){// trim()消除值前没有用的空格// 添加//创建元素 document.createElement("标签名称")var tr=document.createElement("tr")var td_one=document.createElement("td")var td_two=document.createElement("td")// 获取输入框中的值，innerText内部文字td_one.innerText=info.value// innerHTML内部结构td_two.innerHTML='<input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delete" class="del">'//td放入tr中  appendChild(元素)tr.appendChild(td_one)tr.appendChild(td_two)// 设置indextr.setAttribute("index",rowindex)rowindex++//tr放入tbody中tbody.appendChild(tr)// 清空输入框的值 给info.value赋值info.value=" "// 删除var dels=document.querySelectorAll(".del")for(j=0;j<dels.length;j++){dels[j].onclick=function(){var target=this.parentElement.parentElementif(this.parentElement.previousElementSibling.style.textDecoration=="line-through"){if(confirm("是否删除该事件？")){target.parentElement.removeChild(target)// confirm 询问}else{alert("删除已取消！")}}else{alert("坚持完成，不要半途而废")}}}// 中划线var marks=document.querySelectorAll(".mark")for(var i=0;i<marks.length;i++){marks[i].onclick=function(){var target=this.parentElement.previousElementSibling// previousElementSibling 属性返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）if(target.style.textDecoration==""){target.style.textDecoration="line-through"target.style.color="#888"}else{target.style.textDecoration=""target.style.color="#000"}}}// 回显var updates=document.querySelectorAll(".update")for(k=0;k<updates.length;k++){updates[k].onclick=function(){var target=this.parentElement.previousElementSiblingif(target.style.textDecoration==""){info.value=target.innerTextbotton.value="update"updateIndex=this.parentElement.parentElement.getAttribute("index")}else{alert("事件已经完成了")}}}}}}</script>
</head>
<body><div class="container"><div class="addBox"><input type="text" class="info"><input type="button" value="add" class="botton"></div><table border="1"><thead><tr><th>事项</th><th>操作</th></tr></thead></table></div></body>
</html>