基于JQuery制作可编辑的表格特效
最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑
2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢?
第一种单击表格可以编辑的方法
//相当于在页面中的body标签加上onload事件 $(function(){ //找到所有的td节点 vartds=$("td"); //给所有的td添加点击事件 tds.click(function(){ //获得当前点击的对象 vartd=$(this); //取出当前td的文本内容保存起来 varoldText=td.text(); //建立一个文本框,设置文本框的值为保存的值 varinput=$("<inputtype='text'value='"+oldText+"'/>"); //将当前td对象内容设置为input td.html(input); //设置文本框的点击事件失效 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("select"); //当文本框失去焦点时重新变为文本 input.blur(function(){ varinput_blur=$(this); //保存当前文本框的内容 varnewText=input_blur.val(); td.html(newText); }); //响应键盘事件 input.keyup(function(event){ //获取键值 varkeyEvent=event||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; } }); }); });
第二种单击表格可以编辑的方法
$(document).ready(function(){ vartds=$("td"); tds.click(tdClick); }); functiontdClick(){ vartdnode=$(this); vartdtext=tdnode.text(); tdnode.html(""); varinput=$("<input>"); input.val(tdtext);// input.attr("value",tdtext); input.keyup(function(event){ varmyEvent=event||window.event; varkeyCode=myEvent.keyCode; if(keyCode==13){ varinputnode=$(this); varinputtext=inputnode.val(); vartd=inputnode.parent(); td.html(inputtext); td.click(tdClick); } if(keyCode==27){ //判断是否按下ESC键 $(this).parent().html(tdtext); $(this).parent().click(tdClick); } }); tdnode.append(input); tdnode.children("input").trigger("select"); //输入框失去焦点,所执行的方法 input.blur(function(){ tdnode.html($(this).val()); tdnode.click(tdClick); }); tdnode.unbind("click"); }
想比较来说,个人更喜欢第二种一些,小伙伴们是什么意见呢,欢迎留言给我。