HTML学习笔记（6）

利用dom操作实现，对一个表格的增删改查

代码如下：

todolist.html

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>
    <link rel="stylesheet" href="todolist.css">
    <script src="todolist.js" defer></script>
</head>
<body>
    <div class="container">
        <div class = "top">
            <input type="text" class="content">
            <input type="button" value="添加" class="btn">
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>
</html>

todolist.js

javascript 复制代码

// 获取添加按钮
var btn = document.querySelector(".btn")
console.log(btn)

// 获取输入框
var content = document.querySelector(".content")

// 获取tbbody
var tbody = document.querySelector("tbody")

// 定义标识
var flag = 1

//修改存储的是哪条信息
var targetFlag = 0

// 给添加按钮绑事件
btn.onclick = function(){
    if(btn.value == "修改") {
        var tds = document.querySelectorAll("tbody tr td:nth-child(1)")
        for(var i = 0; i < tds.length; i ++ )
        {
            if(tds[i].getAttribute("index") == targetFlag){
                tds[i].innerHTML = content.value
                content.value=""
                btn.value = "添加"
            }
        }
        return
    }
    var text = content.value.trim() // trim去掉前后的空格
    if(text.length != 0){
        var tr = document.createElement("tr")
        var td1 = document.createElement("td")
        td1.setAttribute("index", flag)
        flag ++;
        td1.innerText = text
        var td2 = document.createElement("td")
        td2.innerHTML = '<input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></input>'
        tr.append(td1)
        tr.append(td2)
        tbody.append(tr)
        content.value = "" //去掉输入框内的值
    } else {
        alert("请输入信息")
    }
    // 给完成按钮绑定事件
    var finish = document.getElementsByClassName("finish")
    for(var i = 0; i < finish.length; i ++ ){
        finish[i].onclick = function(){
            var target = this.parentNode.previousElementSibling
            
            if(target.style.textDecoration == "line-through") {
                target.style.textDecoration = "none"
                target.style.color = "#000"
                this.value = "完成"
                this.style.borderColor = "#910000"

                this.style.color = "#910000" 
            } else {
                target.style.textDecoration = "line-through"
                target.style.color = "#888"
                this.value = "恢复"
                this.style.borderColor = "#888"
                this.style.color = "#888"
            }

        }
    }

    var deleteBtn = document.getElementsByClassName("delete")
    for(var i = 0; i < deleteBtn.length; i ++ )
    {
        deleteBtn[i].onclick = function(){
            if(this.parentNode.previousElementSibling.style.textDecoration == "line-through") {
                if(confirm("确定要删除吗？")){
                    var target = this.parentNode.parentNode
                    tbody.removeChild(target)
                }
            } else {
                alert("努力完成吧")
            }
        }
    }

    var update = document.getElementsByClassName("update")
    for(var i = 0; i < update.length; i ++ )
    {
        update[i].onclick = function(){
            var target = this.parentNode.previousElementSibling
            if(target.style.textDecoration == "line-through"){
                alert("已经完成辣，无需修改")
                content.value = ""
                btn.value = "添加"
            } else {
                content.value = target.innerText
                btn.value = "修改"
                targetFlag = target.getAttribute("index")
            }
        }
    }
}

todolist.css

css 复制代码

* {
    padding: 0;
    margin: 0;
}

.container {
    width: 25%;
    margin: 150px auto;
    min-width: 200px;
}

.top {
    display: flex;
}

.top .content {
    width: 80%;
    border: 1px solid #910000;
    padding: 5px;
    /* 外轮廓去掉 */
    outline: none;
    border-radius: 5px 0 0 5px;
}

.top .btn {
    width: 20%;
    border: 1px solid #910000;
    background: #910000;
    color: #fff;
    padding: 5px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

.top .btn:hover {
    box-shadow: 1px 1px 3px #910000;
}

table {
    /* 设置表格边框是否合并collapse相邻的单元格共用一个边框  separate */
    border-collapse: collapse;
    width: 100%;
    margin-top: 30px;
    text-align: center;
    border: 1px solid #fff;
}

table thead tr {
    background: #910000;
    color: #fff;
}

table thead tr th {
    padding: 5px;
    font-size: 14px;
}

table tbody tr {
    background: #eee;
    font-size: 13px;
}

table tbody tr td {
    padding: 5px;
}

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

table tbody tr td input {
    background: none;
    border: 1px solid #910000;
    padding: 2px 5px;
    font-size: 13px;
    color: #910000;
    /* 鼠标样式 */
    cursor: pointer;
}

table tbody tr td input:hover {
    box-shadow: 1px 1px 3px #910000;
}