- <%@ 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){
- thisthis_ago=this;
- name=name2;
- $(this).empty();
- $(this).append("<input name='name' onchange=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>
原文来自:http://cuiran.iteye.com/blog/544255