关键点解析

前端【8】HTMLCSSjavascript实战项目----实现一个简单的待办事项列表

(To-Do

学过jQUery可以极大简化js代码的编写基于之前实现的todolist小demo了解如何使用

jQuery

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

var

修改对应td的文本内容tds.eq(i).text(text);}}//

清空输入框内容$(.content).val();return;}//

index

将按钮的值改为“完成”并设置样式$(this).val(完成).css({color:

#910000});//

设置文本的样式为未完成状态target.css({color:

none,});}

将按钮的值改为“恢复”并设置样式$(this).val(恢复).css({color:

#888,border-color:

设置文本的样式为完成状态灰色带删除线target.css({color:

#888,textDecoration:

删除当前行的tr元素$(this).parent().parent().remove();}}

else

$(this).parent().prev().text();//

$(this).parent().prev().attr(index);//

将文本内容回显到输入框$(.content).val(text);//

else

如果任务已完成弹出提示alert(已经完成啦不用再改啦);//

});

initial-scale1.0titleDocument/titlelink

relstylesheet

srcjs/jQuery.min.js/scriptscript

defer/script

border1***adtrth内容/thth操作/th/tr/***adtbody!--

trtd今天学习/tdtdinput

classupdate/td/trtrtd今天学习/tdtdinput

typebutton

classupdate/td/trtrtd今天学习/tdtdinput

typebutton

classupdate/td/trtrtd今天学习/tdtdinput

typebutton