前端-js例子：todolist

实现效果图：

实现步骤：

1.body部分

1.首先，设置输入数据的框和按钮进行操作

2.设置一个表格标签（有边框），首先在表头放置两列（“事项”‘’操作）

<body><div class="container"><div class="addBox"><input type="text" class="info"><input type="button" value="add" class="btn"></div><table border="1"><thead><tr><th>事项</th><th>操作</th></tr></thead><tbody><!-- <tr><td>晚上上课</td><td><input type="button" value="mark"><input type="button" value="update"><input type="button" value="delete"></td></tr><tr><td>晚上上课</td><td><input type="button" value="mark"><input type="button" value="update"><input type="button" value="delete"></td></tr><tr><td>晚上上课</td><td><input type="button" value="mark"><input type="button" value="update"><input type="button" value="delete"></td></tr> --></tbody></table></div>
</body>

2.css样式设置

1. 先设置外边框

css">*{padding: 0;margin: 0;}

2.设置元素的位置

css">.container{width: 19%;min-width: 200px;/* background-color: aqua; */margin: 150px auto;}

3.输入框实现横向布局

css">.container .addBox{display: flex;}

4.设置输入框输入内容部分

css">.container .addBox .info{width: 88%;border: 1px solid lightcoral;padding: 5px;/* 外轮廓去掉 */outline: none;border-radius: 5px 0 0 5px;}

5.输入框按钮设置

css">.container .addBox .btn{width: 12%;border: none;color: #fff;background-color:  lightcoral;padding: 5px;cursor: pointer;border-radius: 0 5px 5px 0;}

鼠标悬停时按钮颜色变浅

css">.container .addBox .btn:hover{opacity: 0.9;}

6.下面表格设置

css">table{margin-top: 10px;width: 100%;/* 共用一个边框 */border-collapse: collapse;}

表头设置

css">table thead tr{background-color: lightcoral;color: #fff;}table thead tr th{padding: 3px;font-size: 13px;}

表格主体部分设置

每行颜色交错，方便观看

css">table tbody tr:nth-child(odd){background-color: antiquewhite;}table tbody tr:nth-child(even){background-color: #fff;}

每行每个单元格的设置

css">table tbody tr td{font-size: 13px;padding: 5px;text-align: center;}table tbody tr td input{background:none;border: rgb(158, 29, 29) 1px solid;padding: 4px;color: rgb(158, 29, 29);border-radius: 4px;cursor: pointer;}table tbody tr td input:hover{box-shadow: 2px 2px 2px rgb(158, 29, 29);}table tbody tr td,table thead tr th {border-color: #fff;}

3.js变换

1.先获取元素

javascript">var btn= document.querySelector(".btn")var info=document.querySelector(".info")var tbody=document.querySelector("tbody")

2.找到要修改的行

javascript">            var updateIndex

3.表格行的起始位置值

javascript">            var rowIndex=0

4.给add按钮绑定事件

1.修改

4.1.1找到表格所有的行

4.1.2找到要修改的行（回显）

如果表格不为空，把输入框里的值传进要修改的行里

清空输入框里的值

按钮改为“添加”

4.1.3结束

javascript">if(updateIndex){// 修改var trs=document.querySelectorAll("table tbody tr")console.log(trs)for(var l=0;l<trs.length;l++){if(trs[l].getAttribute("index")==updateIndex){if(info.value.trim()){trs[l].firstElementChild.innerText=info.valueinfo.value=""btn.value="add"updateIndex=undefined}else{alert("不能为空")}}}return}

javascript">// 回显var updates=document.querySelectorAll(".update")for(var i=0;i<updates.length;i++){updates[i].onclick=function(){var target=this.parentElement.previousElementSiblingif(target.style.textDecoration==""){info.value=target.innerTextbtn.value="update"updateIndex=this.parentElement.parentElement.getAttribute("index")}else{alert("事情已经完成啦")}}}

2.添加

4.2.1创建一行元素

4.2.2将输入框的值赋给新添加的元素

4.2.3清空输入框的值

javascript"> if(info.value.trim()){// 添加// 创建一行元素var tr=document.createElement("tr")var td_one=document.createElement("td")var td_two=document.createElement("td")// 获取输入框的值，并赋值给第一个tdtd_one.innerText=info.value// 第二个tdtd_two.innerHTML='<input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delete" class="delete">'// 将td放入tr中tr.appendChild(td_one)tr.appendChild(td_two)// 设置属性tr.setAttribute("index",rowIndex)rowIndex++// 将tr放入tbody中tbody.appendChild(tr)// console.log(tr)// console.log(td_one)// console.log(td_two)// 清空输入框的值info.value=""

3.标记

4.3.1 找到所有的mark

4.3.2 找到点击的那一行

4.3.3对应前面的值

4.3.4 划线

javascript"> //生成之后找mark画中划线，标记var marks=document.querySelectorAll(".mark")// console.log(marks)for(var i=0;i<marks.length;i++){marks[i].onclick=function(){var target=this.parentElement.previousElementSiblingif(target.style.textDecoration==""){target.style.textDecoration="line-through"target.style.color="#888"}else{target.style.textDecoration=""target.style.color="#000"}}}

4.删除

4.4.1 找到所有删除行

4.4.2 找到点击的那一行

4.4.3 如果划线，进行删除（确认）

javascript"> var deletes=document.querySelectorAll(".delete")console.log(deletes)for(var j=0;j<deletes.length;j++){deletes[j].onclick=function(){var target=this.parentElement.parentElement// this表示当前点击的这个元素if(this.parentElement.previousElementSibling.style.textDecoration=="line-through"){if(confirm("确认要删除吗？")){target.parentElement.removeChild(target)}else{alert("感谢手下留情")}}else{alert("努力完成，不要半途而废")}}}