前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist

前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)-CSDN博客

学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用 jQuery 来实现常见的动态交互功能。

修改后的js代码

关键点解析

动态添加元素 ：通过 append 方法动态添加表格行，并为每一行生成唯一的 index 属性。
事件委托 ：使用 on 方法将事件委托给 tbody，确保动态添加的元素也能触发事件。
样式控制 ：通过 css 方法动态修改文本和按钮的样式，实现任务完成状态的切换。
数据回显：点击"修改"按钮时，将任务内容回显到输入框中，方便用户修改。

javascript 复制代码

// 定义标识，用于生成唯一的索引值
var flag = 1;

// 存储当前修改的是哪条信息的索引
var targetFlag = 0;

// 添加新行/修改    
$(".btn").on("click", function () {
    // 获取输入框的内容并去除首尾空格
    var text = $(".content").val().trim();
    
    // 如果输入框内容为空，弹出提示
    if (text.length == 0) {
        alert("请输入内容");
    } else {
        // 如果按钮的值为"修改"，则执行修改逻辑
        if ($('.btn').val() == "修改") {
            // 获取所有第一列的td元素
            var tds = $('tbody tr td:nth-child(1)');
            
            // 遍历所有td元素，找到与targetFlag匹配的索引
            for (var i = 0; i < tds.length; i++) {
                if (tds.eq(i).attr('index') == targetFlag) {
                    // 修改对应td的文本内容
                    tds.eq(i).text(text);
                }
            }
            
            // 将按钮的值重置为"添加"
            $('.btn').val("添加");
            
            // 清空输入框内容
            $(".content").val('');
            return;
        }
        
        // 使用输入的内容创建新行
        $("tbody").append(
            '<tr>' +
                '<td index=' + (flag++) + '>' + text + '</td>' + // 第一列，显示文本内容，并赋予唯一索引
                '<td>' +
                    '<input type="button" value="完成" class="finish">' + // 完成按钮
                    '<input type="button" value="删除" class="delete">' + // 删除按钮
                    '<input type="button" value="修改" class="update">' + // 修改按钮
                '</td>' +
            '</tr>'
        );
        
        // 清空输入框内容
        $(".content").val('');
    }
});

// 完成/恢复按钮点击事件
$("tbody").on("click", ".finish", function () {
    // 获取当前点击的按钮的上一个兄弟元素（即文本所在的td）
    var target = $(this).parent().prev();
    
    // 如果按钮的值为"恢复"
    if ($(this).val() == "恢复") {
        // 将按钮的值改为"完成"，并设置样式
        $(this).val("完成").css({
            'color': '#910000',
            'border-color': '#910000'
        });
        
        // 设置文本的样式为未完成状态
        target.css({
            'color': '#910000',
            'textDecoration': 'none',
        });
    } else {
        // 将按钮的值改为"恢复"，并设置样式
        $(this).val("恢复").css({
            'color': '#888',
            'border-color': '#888'
        });
        
        // 设置文本的样式为完成状态（灰色，带删除线）
        target.css({
            'color': '#888',
            'textDecoration': 'line-through',
        });
    }
});

// 删除按钮点击事件
$("tbody").on("click", ".delete", function () {
    // 如果前一个按钮的值为"恢复"（即任务已完成）
    if ($(this).prev().val() == "恢复") {
        // 弹出确认框，确认是否删除
        if (confirm('确定要删除吗')) {
            // 删除当前行的tr元素
            $(this).parent().parent().remove();
        }
    } else {
        // 如果任务未完成，弹出提示
        alert("请努力完成！！");
    }
});

// 修改按钮点击事件
$("tbody").on("click", ".update", function () {
    // 如果前一个按钮的值为"完成"（即任务未完成）
    if ($(this).prev().prev().val() == "完成") {
        // 获取当前行的文本内容
        var text = $(this).parent().prev().text();
        
        // 获取当前行的索引值
        targetFlag = $(this).parent().prev().attr('index');
        
        // 将文本内容回显到输入框
        $('.content').val(text);
        
        // 将按钮的值改为"修改"
        $(".btn").val("修改");
    } else {
        // 如果任务已完成，弹出提示
        alert("已经完成啦不用再改啦");
        
        // 清空输入框内容
        $('.content').val("");
    }
});

修改后的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="css/todolist.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/todolist_jquery.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>
                <!-- <tr>
                    <td>今天学习</td>
                    <td>
                        <input type="button" value="完成" class="finish">
                        <input type="button" value="删除" class="delete">
                        <input type="button" value="修改" class="update">
                    </td>
                </tr>
                <tr>
                    <td>今天学习</td>
                    <td>
                        <input type="button" value="完成" class="finish">
                        <input type="button" value="删除" class="delete">
                        <input type="button" value="修改" class="update">
                    </td>
                </tr>
                <tr>
                    <td>今天学习</td>
                    <td>
                        <input type="button" value="完成" class="finish">
                        <input type="button" value="删除" class="delete">
                        <input type="button" value="修改" class="update">
                    </td>
                </tr>
                <tr>
                    <td>今天学习</td>
                    <td>
                        <input type="button" value="完成" class="finish">
                        <input type="button" value="删除" class="delete">
                        <input type="button" value="修改" class="update">
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
</body>

</html>

至此前端的学习暂时告一段落啦~