使用JavaScript实现“ToDoList”

最新推荐文章于 2024-08-13 22:07:58 发布

流年以逝╮

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量161

点赞数 2

文章标签： javascript css 前端 html

本文链接：https://blog.csdn.net/liunianyishi1/article/details/139535951

版权

具体实现代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/todolist.js" defer></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 400px;
            margin: 200px auto;
        }
        
        .container .addBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .container .addBox .info {
            width: 100%;
            padding: 5px 8px;
            outline: none;
            border: 1px solid #1abc9c;
        }
        
        .container .addBox .add {
            padding: 6px 15px;
            background: #1abc9c;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        .tableBox {
            margin-top: 20px;
            width: 100%;
            /* 设置表格边框合并 */
            border-collapse: collapse;
        }
        
        .tableBox thead tr {
            background: #1abc9c;
            color: white;
        }
        
        .tableBox thead tr th {
            padding: 4px;
            font-size: 15px;
        }
        
        .tableBox tbody tr td {
            text-align: center;
            font-size: 12px;
            padding: 3px;
        }
        
        .tableBox tbody tr td input {
            background: none;
            padding: 3px 6px;
            border: 1px solid #1abc9c;
            cursor: pointer;
            color: #1abc9c;
        }
        
        .tableBox tbody tr td input:hover {
            box-shadow: 1px 1px 1px #1abc9c;
        }
        
        .tableBox tbody tr:nth-child(odd) {
            background: #ccc;
        }
        
        .tableBox tbody tr:nth-child(even) {
            background: #eee;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="addBox">
            <input type="text" class="info">
            <input type="button" value="add" class="add">
        </div>
        <table class="tableBox" border="1">
            <thead>
                <tr>
                    <th>事项</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1111111</td>
                    <td>
                        <input type="button" class="mark" value="mark">
                        <input type="button" class="update" value="update">
                        <input type="button" class="delete" value="delete">
                    </td>
                </tr> -->
 
            </tbody>
        </table>
    </div>
</body>
 
</html>

JavaScript：

// 获取添加按钮
var add = document.querySelector(".add")
 
// 获取输入框中的文本内容
var info = document.querySelector(".info")
 
//定义表格行起始值
var rowIndex = 0
 
//定义要修改数据的索引值
var updateIndex
 
//获取tbody
var tbody = document.querySelector("tbody")
add.onclick = function() {
    if (add.value == "update") {
        var trs = document.querySelectorAll("tbody tr")
        for (var h = 0; h < trs.length; h++) {
            if (trs[h].getAttribute("index") == updateIndex) {
                //修改
                trs[h].firstElementChild.innerHTML = info.value
 
                //清空输入框
                info.value = ""
 
                //按钮的样式再改回添加
                add.value = "add"
 
                //清楚要修改的数据的索引值
                updateIndex = ""
            }
        }
        return
    }
    //添加
    if (info.value.trim()) { //trim()方法是去处前后的空格
 
        //创建一行元素
        var tr = document.createElement("tr")
        tr.setAttribute("index", rowIndex++)
            // rowIndex++
        var td_one = document.createElement("td")
        var td_two = document.createElement("td")
 
        td_one.innerText = info.value
        td_two.innerHTML = ' <input type="button" value="mark" class="mark"><input type="button" value="update" class="update"><input type="button" value="delete" class="delete">'
 
        tr.appendChild(td_one)
        tr.appendChild(td_two)
 
        //将该元素添加到tbody元素最后
        tbody.appendChild(tr)
 
        // 清空输入框中的文本
        info.value = ""
    }
    //获取mark按钮
    var marks = document.querySelectorAll(".mark")
    for (var i = 0; i < marks.length; i++) {
        marks[i].onclick = function() {
            if (this.parentElement.previousElementSibling.style.textDecoration == "line-through") {
                this.parentElement.previousElementSibling.style.textDecoration = "none";
                this.parentElement.previousElementSibling.style.color = "black"
            } else {
                this.parentElement.previousElementSibling.style.textDecoration = "line-through";
                this.parentElement.previousElementSibling.style.color = "#1abc9c"
            }
        }
    }
    //获取delete按钮
    var deletes = document.querySelectorAll(".delete")
    for (var j = 0; j < deletes.length; j++) {
        deletes[j].onclick = function() {
            var target = this.parentElement.parentElement
            if (this.parentElement.previousElementSibling.style.textDecoration == "line-through") {
                if (confirm("确定要删除吗?")) {
                    target.parentElement.removeChild(target)
                } else {
                    alert("感谢手下留情")
                }
            } else {
                alert("不要半途而废，坚持完成")
            }
 
        }
    }
    //回显
    var updates = document.querySelectorAll(".update")
    for (var k = 0; k < updates.length; k++) {
        updates[k].onclick = function() {
            //回显
            var target = this.parentElement.previousElementSibling
 
            if (target.style.textDecoration == "line-through") {
                alert("已标记mark,无法修改")
            } else {
                info.value = target.innerText
 
                //要修改的行数
                updateIndex = this.parentElement.parentElement.getAttribute("index")
 
                //按钮样式上变成update
                add.value = "update"
            }
        }
    }
}