| 标题 | 基于JQuery制作可编辑的表格特效 |
| 内容 | 最近做了个项目，其中项目要求：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑 2个小伙伴给出了2中解决方案，大家来看看哪种更合适呢？ 第一种单击表格可以编辑的方法 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $("td"); //给所有的td添加点击事件 tds.click(function() { //获得当前点击的对象 var td = $(this); //取出当前td的文本内容保存起来 var oldText = td.text(); //建立一个文本框，设置文本框的值为保存的值 var input = $("<input type='text' value='" + oldText + "'/>"); //将当前td对象内容设置为input td.html(input); //设置文本框的点击事件失效 input.click(function() { return false; }); //设置文本框的样式 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() { var input_blur = $(this); //保存当前文本框的内容 var newText = input_blur.val(); td.html(newText); }); //响应键盘事件 input.keyup(function(event) { // 获取键值 var keyEvent = event || window.event; var key = keyEvent.keyCode; //获得当前对象 var input_blur = $(this); switch (key) { case 13://按下回车键，保存当前文本框的内容 var newText = input_blur.val(); td.html(newText); break; case 27://按下 esc键，取消修改，把文本框变成文本 td.html(oldText); break; } }); }); }); 第二种单击表格可以编辑的方法 代码如下: $(document).ready(function(){ var tds = $("td"); tds.click(tdClick); }); function tdClick(){ var tdnode = $(this); var tdtext = tdnode.text(); tdnode.html(""); var input = $("<input>"); input.val(tdtext); // input.attr("value",tdtext); input.keyup(function(event){ var myEvent = event || window.event; var keyCode = myEvent.keyCode; if(keyCode == 13){ var inputnode = $(this); var inputtext = inputnode.val(); var td = 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"); } 想比较来说，个人更喜欢第二种一些，小伙伴们是什么意见呢，欢迎留言给我。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。