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

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

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

修改后的js代码

关键点解析

1. 动态添加元素：通过 append 方法动态添加表格行，并为每一行生成唯一的 index 属性。

2. 事件委托：使用 on 方法将事件委托给 tbody，确保动态添加的元素也能触发事件。

3. 样式控制：通过 css 方法动态修改文本和按钮的样式，实现任务完成状态的切换。

4. 数据回显：点击“修改”按钮时，将任务内容回显到输入框中，方便用户修改。

// 定义标识，用于生成唯一的索引值
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(
            '' +
                '' + text + '' + // 第一列，显示文本内容，并赋予唯一索引
                '' +
                    '' + // 完成按钮
                    '' + // 删除按钮
                    '' + // 修改按钮
                '' +
            ''
        );
        
        // 清空输入框内容
        $(".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代码

    
    
    
    
    
    



    

        

            
            
        
        

            

                

                    
内容
                    
操作
                
            
            

                
            
        
    

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