(JQuery)双击修改table里面的值

上一篇写的是用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' 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> 

  

你可能感兴趣的:(JavaScript,jquery,jsp,cache,css)