JQuery实现可编辑的表格
点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 第一种单击表格可以编辑的方法 //相当于在页面中的 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"); }
用户体验的一篇好文章:http://www.manong123.com/content/5844.html