实现效果图：
实现步骤：
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. 先设置外边框
*{padding: 0;margin: 0;}2.设置元素的位置
.container{width: 19%;min-width: 200px;/* background-color: aqua; */margin: 150px auto;}3.输入框实现横向布局
.container .addBox{display: flex;}4.设置输入框输入内容部分
.container .addBox .info{width: 88%;border: 1px solid lightcoral;padding: 5px;/* 外轮廓去掉 */outline: none;border-radius: 5px 0 0 5px;}5.输入框按钮设置
.container .addBox .btn{width: 12%;border: none;color: #fff;background-color: lightcoral;padding: 5px;cursor: pointer;border-radius: 0 5px 5px 0;}鼠标悬停时按钮颜色变浅
.container .addBox .btn:hover{opacity: 0.9;}6.下面表格设置
table{margin-top: 10px;width: 100%;/* 共用一个边框 */border-collapse: collapse;}表头设置
table thead tr{background-color: lightcoral;color: #fff;}table thead tr th{padding: 3px;font-size: 13px;}表格主体部分设置
每行颜色交错，方便观看
table tbody tr:nth-child(odd){background-color: antiquewhite;}table tbody tr:nth-child(even){background-color: #fff;}每行每个单元格的设置
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.先获取元素
var btn= document.querySelector(".btn")var info=document.querySelector(".info")var tbody=document.querySelector("tbody")2.找到要修改的行
var updateIndex
3.表格行的起始位置值
var rowIndex=0
4.给add按钮绑定事件
1.修改
4.1.1找到表格所有的行
4.1.2找到要修改的行（回显）
如果表格不为空，把输入框里的值传进要修改的行里
清空输入框里的值
按钮改为“添加”
4.1.3结束
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}// 回显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清空输入框的值
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 划线
//生成之后找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 如果划线，进行删除（确认）
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("努力完成，不要半途而废")}}}
