点击要修改的内容,出现输入框(框中有原先的内容),输入完新的内容后,鼠标点击其他地方,无刷新提交并显示新的内容
我这个代码点击后是出现了文本框,但是改了内容后,点其他地方,他不会提交,一直是文本框,请高手们不吝赐教,最好把代码贴出来,小弟拜谢!~~
<script language="javascript">
var req;
var gID;
function init(){
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}
else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHttp");
}
}
function changeToInput(id){
var oId=document.getElementById(id);
var value=oId.value;
oId.outerHTML="<input type='text' id='"+id+"' value='"+value+"' onblur=change(this.id) size=3 />"
}
function change(id){
var oId=document.getElementById(id);
var px=oId.value;
gId=oId.id
init();
url="pro_px.asp?id="+id+"&px="+px;
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
function callback(){
if(4==req.readyState){
if(200==req.status){
var oId=document.getElementById(gId);
var value=oId.value;
oId.outerHTML="<span style='' id='"+gId+"' value='"+value+"' onclick=changeToInput(this.id)>"+value+"</span>"
}
}
}
</script>
<%do while not rs.eof%>
<tr class="tdbg">
<td width="39" align="center" bgcolor="#ECF5FF"><%=rs("id")%></td>
<td height="90" align="center" valign="middle" bgcolor="#ECF5FF"><img src="../<%=rs("cpurl")%>" width="100" height="80" border="0" /></td>
<td align="center" bgcolor="#ECF5FF"><span id="<%=Rs("id")%>" value="<%=Rs("px")%>" onclick="changeToInput(this.id)"><%=Rs("px")%></span></td>
<td align="center" bgcolor="#ECF5FF"><%=rs("cpname")%></td>
<td align="center" bgcolor="#ECF5FF"><%=rs("times")%></td>
<td width="111" align="center" bgcolor="#ECF5FF">| <a href="pro_modi.asp?ID=<%=rs("id")%>">修改</a> | <a href="pro_Del.asp?ID=<%=rs("ID")%>&Action=Del" onClick="return ConfirmDel();">删除</a></td>
</tr>
<%
i=i+1
if i>=MaxPerPage then exit do
rs.movenext
loop
%>
处理页面
<!--#include file="conn.asp"-->
<%id=request("id")
px=request("px")
set rs=server.createobject("adodb.recordset")
sql="select * from cp where id="&id
rs.open sql,conn,1,3
rs("px")=px
rs.update
end if
rs.close
set rs=nothing
Response.Expires = 0
Response.Expiresabsolute = Now() - 1
Response.AddHeader "pragma","no-cache"
Response.AddHeader "cache-control","private"
Response.CacheControl = "no-cache"
'-------------------------------------------
response.Charset="GB2312" '//数据返回的编码类型 显示中文数据必须
'-------------------------------------------
%>
---------------------------解答------------------------------------
因为不能测试你服务端的程序,所以只对你客户端脚本代码进行了修改,经测试完全能达到你的要求,如果你用以下代码还是有问题,就要检测你的 pro_px.asp 是否正常工作 了!!
<script language="javascript">
var req;
var gID;
function init(){
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}
else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHttp");
}
}
function changeToInput(id){
var oId=document.getElementById(id);
var value=oId.value;
oId.outerHTML="<input type='text' id='"+id+"' value='"+value+"' onblur=change(this.id) size=10 />"
}
function change(id){
var oId=document.getElementById(id);
var px=oId.value;
//以下放异步处理代码 因为无测试所以注掉,正式使用请取消注释,并注掉测试代码
//init();
gId=oId.id
//init();
//url="pro_px.asp?id="+id+"&px="+px;
//req.open("GET",url,true);
//req.onreadystatechange=callback;
//req.send(null);
callback();//此句是测试代码
}
function callback(){
//正式代码请取消以下注释
//if(4==req.readyState){
//if(200==req.status){
var oId=document.getElementById(gId);
var value=oId.value;
oId.outerHTML="<span style='' id='"+gId+"' value='"+value+"' onclick=changeToInput(this.id)>"+value+"</span>"
//}
//}
}
</script>
<table border="1" width="600">
<tr class="tdbg">
<td width="39" align="center" bgcolor="#ECF5FF">10001</td>
<td height="90" align="center" valign="middle" bgcolor="#ECF5FF">112</td>
<td align="center" bgcolor="#ECF5FF"><span id="10001" value="aabbc" onclick="changeToInput(this.id)">ccccc</span></td>
<td align="center" bgcolor="#ECF5FF">aaaa</td>
<td align="center" bgcolor="#ECF5FF">bbbbb</td>
<td width="111" align="center" bgcolor="#ECF5FF">| <a href="pro_modi.asp?ID=10001">修改</a> | </td>
</tr>
</table>