Javascript应用（TodoList表格）

最新推荐文章于 2024-09-11 23:16:45 发布
不修×蝙蝠
最新推荐文章于 2024-09-11 23:16:45 发布
阅读量292
点赞数 1
文章标签： javascript css 前端 html
本文链接：https://blog.csdn.net/m0_74977981/article/details/142004803
版权
<!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>
        *{
            margin: 0%;
            padding: 0%;
        }
        .container{
            width:30%;
            margin:150px auto;
            min-width: 200px;  /* 设一个保底宽度，以防止特定调整下变形太严重 */
        }
        .container .addBox{
            display:flex;
        }
        .container .addBox .info{
            width:90%;
            border:2px solid aqua;
            padding:5px;
            outline:none;   /* 去掉外轮廓 */
            border-radius: 10px 0 0 10px;

        }
        .container .addBox .btn{
            background: aquamarine;
            color:#d91b1b;
            padding:10px;
            border-style: dashed;
            border-width: 1px;

        }
        .container .addBox .btn:hover{
            opacity: 50%;
        }
        table{
            margin-top:15px;
            width:100%;
            border-collapse: collapse;
        }
        table thead tr{
            background: aquamarine;

        }
        table thead tr th{
            font-size: 13px;
            padding: 3px;

        }
        table  tbody tr:nth-child(odd){
            background: aqua;
            

        }
        table tbody tr:nth-child(even){
            background: aquamarine;
           
        }
        table tbody tr td{
            font-size: 13px;
            padding: 3px;
            text-align: center;
            margin: 1px auto;
           
        }
        table tbody tr td input{
            margin: 2px 10px;
           
        }
        table tbody tr td input{
            border:solid aquamarine;
            color:#d91b1b;
            background: azure;
            box-shadow: 0 0 5px ;
        }

        


    </style>
    <script>
        window.onload=function(){
        // ============输入================
            // 获取元素
            var btn=document.querySelector(".btn")
            var info=document.querySelector(".info")
            var tbody=document.querySelector("tbody")
            var updateIndex
            var rowIndex=0  // 表格行的起始值
            // 给add按钮绑定事件
            btn.onclick=function(){
                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
                }

                if(info.value.trim()){
                    // 防止输入空格操作（.trim()）
                    var tr=document.createElement("tr")
                    var td_1=document.createElement("td")
                    var td_2=document.createElement("td")

                    // 获取输入框中的值，并赋给第一个td
                    // td_1.value=info.value
                    // td_2.value=info.value

                    td_1.innerHTML=info.value

                    td_2.innerHTML='<input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delate" class="delate"> '
                    // 放入元素
                    tr.appendChild(td_1)
                    tr.appendChild(td_2)

                    // 设置属性
                    tr.setAttribute("index",rowIndex)
                    rowIndex++



                    tbody.appendChild(tr)

                    info.value=" "
                    // 最后清除输入框操作

                }   
            // ===============标记===================
          
             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;
                //    .previousElementSibling(兄各节点中的上一个节点)
                    if(target.style.textDecoration == ""){
                    target.style.textDecoration = "line-through"
                    target.style.color="#888"}
                 else {
                    target.style.textDecoration = ""
                    target.style.color="#000"
                }
                
                    
            }
             
         }
// =================删除=================
         var delate = document.querySelectorAll(".delate")
         console.log(delate)
         for(var j=0;j<delate.length;j++){
            delate[j].onclick=function(){
                var target=this.parentElement.parentElement
                if (this.parentElement.previousElementSibling.style.textDecoration=="line-through"){
                    if(confirm("真不要啦？")){
                    target.parentElement.removeChild(target)
                    alert("算你狠")

                }else{
                    alert("我就知道你舍不得")
                }
                }else{
                    alert("写完再来！")
                }
               
                
            }
         }

// ==================回显===================
   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"
            // btn.value="add"
           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="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="delate">
                    </td>
                </tr> -->
    
            </tbody>
        </table>
    </div>
</body>
</html>