基于jquery制作可编辑的表格特效

《基于jquery制作可编辑的表格特效》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学习，了解了党的发展历程，对党的性质、宗旨、任务等基本知识有了进一步的了解基于JQuery制作可编辑的表格特效　　最近做了个项目，其中项目要求：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑　　2个小伙伴给出了2中解决方案，大家来看看哪种更合适呢？　　第一种单击表格可以编辑的方法　　代码如下:　　//相当于在页面中的body标签加上onload事件　　$(function(){　　//找到所有的td节点　　vartds=$("td");　　//给所有的td添加点击事件　　

2、tds.click(function(){　　//获得当前点击的对象　　vartd=$(this);　　//取出当前td的文本内容保存起来　　varoldText=td.text();　　//建立一个文本框，设置文本框的值为保存的值　　varinput=$("");　　//将当前td对象内容设置为input　　td.html(input);对党的认识也有了进一步的提高。才真正体会到了中国共产党的伟大、光荣和正确，更感到只有中国共产党是全中国最广大人民利益的忠实代表我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学习，了解了党的发展历程，对党的性质、宗

3、旨、任务等基本知识有了进一步的了解　　//设置文本框的点击事件失效　　input.click(function(){　　returnfalse;　　});　　//设置文本框的样式　　input.css("border-width","0");　　input.css("font-size","16px");　　input.css("text-align","center");　　//设置文本框宽度等于td的宽度　　input.width(td.width());　　//当文本框得到焦点时触发全选事件　　input.trigger("focus").trigger("se

4、lect");　　//当文本框失去焦点时重新变为文本　　input.blur(function(){　　varinput_blur=$(this);　　//保存当前文本框的内容　　varnewText=input_blur.val();　　td.html(newText);　　});　　//响应键盘事件　　input.keyup(function(event){　　//获取键值对党的认识也有了进一步的提高。才真正体会到了中国共产党的伟大、光荣和正确，更感到只有中国共产党是全中国最广大人民利益的忠实代表我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学

5、习，了解了党的发展历程，对党的性质、宗旨、任务等基本知识有了进一步的了解　　varkeyEvent=event

6、

7、window.event;　　varkey=keyEvent.keyCode;　　//获得当前对象　　varinput_blur=$(this);　　switch(key)　　{　　case13://按下回车键，保存当前文本框的内容　　varnewText=input_blur.val();　　td.html(newText);　　break;　　case27://按下esc键，取消修改，把文本框变成文本　　td.html(oldText);　　break

8、;　　}　　});　　});　　});　　第二种单击表格可以编辑的方法　　代码如下:　　$(document).ready(function(){　　vartds=$("td");　　tds.click(tdClick);对党的认识也有了进一步的提高。才真正体会到了中国共产党的伟大、光荣和正确，更感到只有中国共产党是全中国最广大人民利益的忠实代表我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学习，了解了党的发展历程，对党的性质、宗旨、任务等基本知识有了进一步的了解　　});　　functiontdClick(){　　vartdnode=$(this

9、);　　vartdtext=tdnode.text();　　tdnode.html("");　　varinput=$("");　　input.val(tdtext);//input.attr("value",tdtext);　　input.keyup(function(event){　　varmyEvent=event

10、

11、window.event;　　varkeyCode=myEvent.keyCode;　　if(keyCode==13){　　varinputnode=$(this);　　varinputtext=inputnode.val();