JavaScript实现备忘录的增删改操作-CSDN博客

本文链接：https://blog.csdn.net/2401_84284464/article/details/148262982

最终实现目标效果：

添加任务：用户输入内容后点击“add”，创建包含任务和操作按钮的新行。每个任务分配唯一index标识（通过flag自增实现）。
标记完成/未完成：点击“mark”切换任务文本的中划线样式和颜色。
更新任务：点击“update”将任务内容回填到输入框，进入编辑模式，保存后更新原任务。
删除任务：仅允许删除已标记完成的任务，需二次确认。

备忘录增删改操作

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格增删改查</title>
  <link rel="stylesheet" href="style.css">
  <script src="javascript.js" defer></script>

</head>
<body>
    <div class="container">
        <div class="addbox">
            <input type="text" class="text">
            <input type="button" class="add" value="add">
        </div>
        <table border="1">
            <thead>
                <tr>
                    <td>事项</td>
                    <td width="150">操作</td>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>学习</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>
                <tr>
                    <td>学习</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>
                <tr>
                <td>学习</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>

CSS 部分

*{
    padding: 0;
    margin: 0;
}
.container{
    width: 25%;
    margin: 100px auto;
    min-width: 230px;
}

.container .addbox{
    display: flex;
    /* 一左一右 */
    justify-content: space-between;
    align-items: center;
}

.container .addbox .text{
    width: 85%;
    padding: 6px 10px;
    border:2px solid #910000;
    /* 去掉轮廓 */
    outline: none;
    /* 圆角 */
    border-radius: 5px 0px 0px 5px;
}

.container .addbox .add{
    width: 15%;
    padding: 7.6px 10px;
    background: #910000;
    border:0px;
    color: white;
    border-radius: 0px 5px 5px 0px;
    /* 鼠标样式 */
    cursor: pointer;
}
.container .addbox .add:hover{
        background: #4f1010;
}
table {
    width: 100%;
    margin-top: 10px;
    /* 设置边框是否合用 */
    border-collapse: collapse;
    border:1px solid #fff;
}

/* 右侧居中 */
table tr td:nth-child(2) {
    text-align: center;
}
table thead tr{
    background: #910000;
    color: white;
    font-size: 14px;
    
}
table thead tr td{
    padding: 4px 5px;
    font-size: 15px;
    font-weight: 430;
}
table tbody tr{
    background: #f7f5f5;
}

table tbody tr:nth-child(odd){
    background: #e4e2e2;
}
table tbody tr td{
    padding: 3px 5px;
    font-size: 14px;
    font-weight: 350;
}

table tbody input{
        /* 鼠标样式 */
    border-radius: 3px;
    cursor: pointer;
    background:none;
    color: #910000;
    font-size: 13px;
    border:1.7px solid #910000;
    padding: 3px;
}

备忘录样式：
在这里插入图片描述

JavaScript 部分

//创建
var add = document.querySelector(".add")
var text = document.querySelector(".text")
var tbody = document.querySelector("tbody")
var flag = 0
var target

add.onclick = function () {
    //修改
    if(add.value == "update"){
        var tds = document.querySelectorAll("tbody tr td:nth-child(1)") 
        for(var i = 0;i<tds.length;i++){
            if(tds[i].getAttribute("index") == target){
                tds[i].innerText = text.value
                text.value = ""
                add.value = "add"
            }
        }
        return
    }


    //获取输入框里的内容
    if (text.value.trim()) {
        //创建一行元素
        var tr = document.createElement("tr")
        var td1 = document.createElement("td")
        var td2 = document.createElement("td")

        td1.setAttribute("index",flag)
        flag++

        td1.innerText = text.value.trim()
        td2.innerHTML = '<input type="button" value="mark" class="mark"> ' +
        '<input type="button" value="update" class="update"> '+
        '<input type="button" value="delete" class="delete"> '
        tr.appendChild(td1)
        tr.appendChild(td2)
        tbody.appendChild(tr)
        //给输入框值设置为空
        text.value = ""
    } else {
        alert("请输入内容")
    }

    //完成
    var marks = document.querySelectorAll(".mark")
    for (var i = 0; i < marks.length; i++) {
        marks[i].onclick = function () {
            var mark_td = this.parentElement.previousElementSibling
            if (mark_td.style.textDecoration == 'line-through') {
                mark_td.style.textDecoration = "none"
                mark_td.style.color = "#000"
            } else {
                mark_td.style.textDecoration = "line-through"
                mark_td.style.color = "#888"
            }
        }
    }

    //删除
    var del = document.querySelectorAll(".delete")
    for (var i = 0; i < del.length; i++) {
        del[i].onclick = function () {
            if (this.parentElement.previousElementSibling.style.textDecoration == 'line-through') {
                if (confirm("确定删除吗？")) {
                    var delete_tr = this.parentElement.parentElement
                    delete_tr.parentElement.removeChild(delete_tr)
                }
            } else {
                alert("请先完成")
            }
        }
    }
    //回显
    var updates = document.querySelectorAll(".update")
    for (var i = 0; i < updates.length; i++) { 
        updates[i].onclick = function () {
            var update_td = this.parentElement.previousElementSibling
            if(update_td.style.textDecoration == 'line-through'){
                text.value = ""
                add.value = "add"
                alert("已经完成啦")
            }else{
                text.value = update_td.innerText
                add.value = "update"
                target = update_td.getAttribute("index")
            }
        }
    }
}