前端-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. 先设置外边框
*{
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.value
info.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.previousElementSibling
if(target.style.textDecoration==""){
info.value=target.innerText
btn.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")
// 获取输入框的值，并赋值给第一个td
td_one.innerText=info.value
// 第二个td
td_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.previousElementSibling
if(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("努力完成，不要半途而废")
}
}
}
原文地址：https://blog.csdn.net/m0_75163045/article/details/142346294
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！