上一篇写的是用DOM来操作table的，这篇采用的是jquery. 自己需要一个jquery.js文件.
写道 <%@ 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 '2.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="${pageContext.request.contextPath}/js/jquery.js"></script> <style type="text/css"> th { background: #0066FF; color: #FFFFFF; line-height: 20px; height: 30px; } td { padding: 6px 11px; border-bottom: 1px solid #95bce2; vertical-align: top; text-align: center; } td * { padding: 6px 11px; } tr.alt td{ background: #ecf6fc; } tr.over td{ background: #bcd4ec; } </style> <script type="text/javascript"> var this_ago; var name; $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}) $(".stripe tr:even").addClass("alt"); //加事件(双击替换文本) //:td:first-child $(".stripe tr td").dblclick(function() { if(this_ago!=null){ if(this_ago!=this){ huanyuan(this_ago); }else{ //点击同一个先判断当前值和开始值是否相等；不能的话可以修改 if(name==""||name==null){ return; }else{ if(inname!=""&&inname!=null){ if(inname!=name){ }else{ return; } }else{ //返回 return; } } } } if($(this).text()!=""&&$(this).text()!=null){ var name2=$(this).text();//替换文本框 if(name2!=""&&name2!=null){ this_ago=this; name=name2; $(this).empty(); $(this).append("<input name='name' οnchange=getNa(this) value='"+name+"' size='8'>"); } } }); }) //onchange文本框onchange时调用该方法 var inname;//文本框的值 function getNa(para){ inname=para.value; var tdv=document.createTextNode(inname); para.replaceNode(tdv); } //还原 var iname1; function huanyuan(obj){ if(inname!=""&&inname!=null){ if(inname!=name){ $(obj).empty(); //判断是否改变 if(iname1!=inname){ $(obj).append(inname); }else{ //相等的话说明没改变就要用当前的name来默认 $(obj).append(name); } iname1=inname; }else{ $(obj).empty(); $(obj).append(name); } }else{ $(obj).empty(); $(obj).append(name); } } </script> </head> <body> <table class="stripe" width="200" border="0" cellpadding="1" cellspacing="1"> <tr> <th width="50">序号</th><th width="150">名字</th> </tr> <tr> <td>1</td><td>AAA</td> </tr> <tr> <td>2</td><td>BBB</td> </tr> <tr> <td>3</td><td>CCC</td> </tr> <tr> <td>4</td><td>DDD</td> </tr> <tr> <td>5</td><td>EEE</td> </tr> </table> </body> </html>
相关资源：谷歌安装器(如果Go安装器无法打卡可以使用这个)
