jQuery实现备忘录的增删改操作

原创已于 2025-07-01 12:30:59 修改 · 387 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

于 2025-06-15 10:28:49 首次发布

添加任务：用户输入内容后点击“add”，创建包含任务和操作按钮的新行。
标记完成/未完成：点击“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="../jquery.js"></script>
  <script src="todolist1.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 部分

注意：主要依靠 jQuery 实现

var flag = 0
var target

//添加
$(".add").click(function () {
    if ($(".text").val().trim()) {
        if (target) {
            //修改
            for(var i = 0; i < $("tbody tr td:nth-child(1)").length; i++){
                if ($("tbody tr td:nth-child(1)").eq(i).attr("index") == target) {
                    $("tbody tr td:nth-child(1)").eq(i).text($(".text").val().trim())
                }
            }
            target = ''
            $(".add").val("add")
        } else {
            //添加
            $("tbody").append('<tr>' +
                '<td index=' + flag + '>' + $(".text").val().trim() + '</td>' +
                '<td>' +
                '<input type="button" value="mark" class="mark"> ' +
                '<input type="button" value="update" class="update"> ' +
                '<input type="button" value="delete" class="delete"> ' +
                '</td>' +
                '</tr>')
            flag++
        }
    }
    $(" .text").val("")
})
//完成
$("tbody").on("click", ".mark", function () {
    if ($(this).parent().prev().css("text-decoration-line") == "line-through") {
        $(this).parent().prev().css({
            "text-decoration": "none",
            "color": "#000"
        })
    }
    else {
        $(this).parent().prev().css({
            "text-decoration": "line-through",
            "color": "#888"
        })
    }
})
//删除
$("tbody").on("click", ".delete", function () {
    if ($(this).parent().prev().css("text-decoration-line") == "line-through") {
        if (confirm("确定删除吗？")) {
            $(this).parent().parent().remove()
        }
    } else {
        alert("请先完成")
    }
})

//回显
$("tbody").on("click", ".update", function () {
    if ($(this).parent().prev().css("text-decoration-line") == "line-through") {
        alert("已经完成啦")
        $(".text").val("")
    } else {
        $(".text").val($(this).parent().prev().text())
        $(".add").val("update")
        target = $(this).parent().prev().attr("index")
    }
})