<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> td{ border:1px solid #CCC; font-size:14px; } </style> <script src="../scripts/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> //实现表格可编辑 $(document).ready(function(){ //取出所有的单元格,除第一行的菜单以外 var tds=$("tr:gt(0) td"); //alert(tds.length); //给每个单元格注册一个单击事件 tds.click(tdClick); }); function tdClick(){ //得到该单元格的对象 var td=$(this); //取出改单元格的内容 var tdText=td.text(); //alert(tdText); //清空改单元格内容 td.empty();//或者td.html("");也可以 //创建一个input文本框 var input=$("<input>"); //将原来的值赋值给input文本框 input.attr("value",tdText); //给文本框注册一个keyup事件 input.keyup(function(event){ var myevent=event||window.event; //判断是否是回车键安县 if(myevent.keyCode==13){ //将当前输入的信息保存下来 var inputnode=$(this); //文本框的值 var inputText=inputnode.val(); //清空改td中的内容 var mytd=inputnode.parent(); mytd.empty(); //将文本框值赋给td mytd.html(inputText); //让td重新拥有单击事件 mytd.click(tdClick); } }); input.blur(function(){ var mytd=$(this).parent(); var inputText=$(this).val(); mytd.empty(); mytd.html(inputText); mytd.click(tdClick); }); //将文本框追加给单元格 td.append(input); //文本框高亮选中 var inputdom=input.get(0); inputdom.select(); //td.html(input.val()); //一处该单元格的单击事件 td.unbind("click"); }; </script> </head> <body> <table width="691" style="text-align:center; width:1000px; border:1px solid #CCC; border-collapse:collapse;"> <tr> <td width="63">姓名</td> <td width="42">年龄</td> <td width="42">性别</td> <td width="354">地址</td> <td width="213">电话</td> <td width="258">邮箱</td> </tr> <tr> <td>张三</td> <td>14</td> <td>男</td> <td>宁波市苍松路55号</td> <td>13599887676</td> <td>sanzhang@163.com</td> </tr> <tr> <td>李四</td> <td>16</td> <td>男</td> <td>宁波市海曙区解放南路15号</td> <td>13199887646</td> <td>sili@qq.com</td> </tr> <tr> <td>王五</td> <td>24</td> <td>男</td> <td>宁波市海曙区鄞奉路55号</td> <td>13899887672</td> <td>wuwang@163.com</td> </tr> <tr> <td>张婷婷</td> <td>18</td> <td>女</td> <td>宁波市海曙区环城西路45号</td> <td>13199887226</td> <td>tingting@163.com</td> </tr> </table> </body> </html>