前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist
前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)-CSDN博客
学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用 jQuery 来实现常见的动态交互功能。
修改后的js代码
关键点解析
-
动态添加元素：通过
append方法动态添加表格行，并为每一行生成唯一的index属性。 -
事件委托：使用
on方法将事件委托给tbody，确保动态添加的元素也能触发事件。 -
样式控制：通过
css方法动态修改文本和按钮的样式，实现任务完成状态的切换。 -
数据回显：点击“修改”按钮时，将任务内容回显到输入框中，方便用户修改。
// 定义标识，用于生成唯一的索引值
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代码
<!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>至此前端的学习暂时告一段落啦~