网站营销力,关键词排名什么意思,郑州百姓网招聘,设计云官网前端【8】HTMLCSSjavascript实战项目----实现一个简单的待办事项列表 (To-Do List)-CSDN博客 学过jQUery可以极大简化js代码的编写#xff0c;基于之前实现的todolist小demo#xff0c;了解如何使用 jQuery 来实现常见的动态交互功能。
修改后的js代码
关键点解析 动态添加… 前端【8】HTMLCSSjavascript实战项目----实现一个简单的待办事项列表 (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 typebutton value完成 classfinish // 完成按钮input typebutton value删除 classdelete // 删除按钮input typebutton value修改 classupdate // 修改按钮/td /tr);// 清空输入框内容$(.content).val();}
});// 完成/恢复按钮点击事件
$(tbody).on(click, .finish, function () {// 获取当前点击的按钮的上一个兄弟元素即文本所在的tdvar 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefcss/todolist.cssscript srcjs/jQuery.min.js/scriptscript srcjs/todolist_jquery.js defer/script
/headbodydiv classcontainerdiv classtopinput typetext classcontentinput typebutton value添加 classbtn/divtable border1theadtrth内容/thth操作/th/tr/theadtbody!-- trtd今天学习/tdtdinput typebutton value完成 classfinishinput typebutton value删除 classdeleteinput typebutton value修改 classupdate/td/trtrtd今天学习/tdtdinput typebutton value完成 classfinishinput typebutton value删除 classdeleteinput typebutton value修改 classupdate/td/trtrtd今天学习/tdtdinput typebutton value完成 classfinishinput typebutton value删除 classdeleteinput typebutton value修改 classupdate/td/trtrtd今天学习/tdtdinput typebutton value完成 classfinishinput typebutton value删除 classdeleteinput typebutton value修改 classupdate/td/tr --/tbody/table/div
/body/html 至此前端的学习暂时告一段落啦~
