当前位置：首页 > article >正文

前端-js例子：todolist

article 2024/9/24 8:14:51

实现效果图：

实现步骤：

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("努力完成，不要半途而废")
                            }
                            
                        }
                    }