用jquery实现可以编辑表格-优快云博客

本文介绍了一种使用jQuery实现网页表格实时编辑的方法。通过为表格单元格添加点击事件，将静态文本转换为可编辑的输入框，支持回车和ESC键提交或取消更改。该方案适用于简单的数据修改场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery实现可以编辑表格

index.html 代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>可编辑的表格</title> <mce:script type="text/javascript" src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript" src="js/myjs.js" mce_src="js/myjs.js"></mce:script> <link type="text/css" rel="stylesheet" href="css/css.css" mce_href="css/css.css"> </head> <body> <center> <table> <thead> <tr><th colspan="2">鼠标点击可以编辑表格</th></tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>001</td> <td>张三</td> </tr> <tr> <td>002</td> <td>李四</td> </tr> <tr> <td>003</td> <td>王五</td> </tr> <tr> <td>004</td> <td>赵六</td> </tr> </tbody> </table> </center> </body> </html>

css.css文件如下：

table{ border: 1px solid black; border-collapse: collapse; /*修正单元格不能合并的问题*/ width: 400px; } table td{ border: 1px solid black; width: 50%; } table th{ border: 1px solid black; width: 50%; } tbody th{ background-color:#B3B34D; }

myjs.js原代码如下：

//需要首先通过javascript来解决内容部分背景色不同 //$("document").ready(function (){ // // //}); $(function (){ //找到所有的偶数行出了第一个 $("tbody tr:even").css("background-color","#FFFACD"); //odd基数个结果 //even为了把通过tbody tr返回的所有的TR元素中下表是偶数的返回 //找到所有的学号的单元格 var numtd = $("tbody td:even"); //给这些单元格注册鼠标点击的事件。 numtd.click(function (){ var tdobj=$(this); //不执行原来的东西 if(tdobj.children("input").length >0){ return false; } var text =tdobj.html(); tdobj.html(""); //创建文本框 //文本框的宽带和td的一样 //找到td this 对应鼠标的点击的事件 var inputobj= $("<input type='text'>").css("border-width","0") .css("font-size","16").width(tdobj.width()) .css("background-color",tdobj.css("background-color")) .val(text).appendTo(tdobj); //文本框插入到td中 inputobj.trigger("focus").trigger("select"); inputobj.click(function(){ return false; }); //处理文本狂上回车和esc按键操作 inputobj.keyup(function (event){ //处理键盘 var keycode =event.witch; //处理回的情况 if(keycode==13) { var inputtext = $(this).val(); tdobj.html(inputtext); } //处理esc的情况 if(keycode==27){ tdobj.html(text); } }); }); });