在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我
们就jQuery来说明一下可编辑表格的实现步骤
首先是HTML代码，非常简单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>可以编辑的表格</title> <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="/Ajax/js/edit.js"></script> <link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link> </head> <body> <table border="1px"> <tr> <td>123123</td> <td>456456</td> </tr> </table> </body></html>然后是js代码
$(function(){ //找到所有的td节点 $("td").click(tdclick);});function tdclick(){ var td = $(this); //1.取出当前的文本内容并且保存起来 var text = td.text(); //2. 清除当前的td内容 td.html("");//也可以用empty()方法 //3.建立一个input标签 var input = $("<input>"); //4.设置文本框里面的值是改写后的内容 input.attr("value",text); //4.5响应键盘事件，处理回车 input.keyup(function(event){ //1.判断是否回车按下 //结局不同浏览器获取时间的差异 var myEvent = event || window.event; var key = myEvent.keyCode; if(key == 13){ var inputNode = $(this); //1.保存当前文本框的内容 var inputText = inputNode.val(); //2.清空td里面的内容 inputNode.parent().html(inputText); td.click(tdclick); } }); input.blur(function(){ var inputNode = $(this); var inputText = inputNode.val(); inputNode.parent().html(inputText); td.click(tdclick); }); //5.把文本框就加入到td里面去 td.append(input); //6.需要清除td上面的点击事件 //6.5高亮数据 td.unbind("click"); //7.提取文本框里面的值}注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow