jquery可编辑表格

yuming.xiao · 发表于 2013-2-7 15:05:17

<!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();//将文本框值赋给tdmytd.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>

		自动登录	找回密码
密码			立即注册