jquery双击编辑文本
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'test4.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //隔行换色 $("tbody tr:odd").css("background-color","#eee"); var numId = $(".tbody td"); numId.dblclick(function(){ var tdIns = $(this); var tdpar = $(this).parents("tr"); tdpar.css("background-color","yellow"); if ( tdIns.children("input").length>0 ){ return false; } var inputIns = $("<input type='text'/>"); //需要插入的输入框代码 var text = $(this).html(); inputIns.width(tdIns.width()); //设置input与td宽度一致 inputIns.val(tdIns.html()); //将本来单元格td内容copy到插入的文本框input中 tdIns.html(""); //删除原来单元格td内容 inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中 inputIns.click(function(){ return false;}); inputIns.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); } }); //处理Enter和Esc事件 inputIns.blur(function(){ var inputText = $(this).val(); tdIns.html(inputText); tdpar.css("background-color","white"); tdIns.html(text); }); }); }); </script> </head> <body> <table id="tableSort"> <thead> <tr> <th style="cursor: pointer;">会员ID</th> <th style="cursor: pointer;">会员名</th> <th style="cursor: pointer;">邮箱</th> <th style="cursor: pointer;">会员组</th> <th style="cursor: pointer;">城市</th> <th style="cursor: pointer;">注册时间</th> </tr> </thead> <tbody class="tbody"> <tr> <td>126</td> <td>webw3c</td> <td>este@126.com</td> <td>普通会员</td> <td>北京</td> <td>2011-04-13</td> </tr> <tr> <td>145</td> <td>test001</td> <td>test001@126.com</td> <td>中级会员</td> <td>合肥</td> <td>2011-03-27</td> </tr> <tr> <td>116</td> <td>wuliao</td> <td>wuliao@126.com</td> <td>普通会员</td> <td>南昌</td> <td>2011-04-01</td> </tr> <tr> <td>129</td> <td>tired</td> <td>tired@126.com</td> <td>中级会员</td> <td>北京</td> <td>2011-04-06</td> </tr> <tr> <td>155</td> <td>tiredso</td> <td>tireds0@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-06</td> </tr> <tr> <td>131</td> <td>javascript</td> <td>js2011@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-08</td> </tr> <tr> <td>132</td> <td>jQuery</td> <td>jQuery@126.com</td> <td>高级会员</td> <td>北京</td> <td>2011-04-12</td> </tr> </tbody> </table> </body> </html>