数据表 grid (id,a,b,c,d,e)
js-grid.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--#include file="root-conn.asp"-->
<HTML>
<HEAD>
<TITLE> JS模仿的DataGrid</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var http_request = false;
function SaveEditValue(url) {
var waiting_div= document.getElementById('waiting_div');
waiting_div.style.visibility = 'visible';
/***********************************/
生成xmlhttprequest对象
/***********************************/
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
/************************************/
设置发送数据,返回时执行动作
/************************************/
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var new_return=http_request.responseText;
if(new_return!=''){
var objTable_pre=document.getElementById('show_tb');
objTable_pre.deleteRow(objTable_pre.rows.length-1);
objTable_pre.deleteRow(0);
var objTable=objTable_pre.childNodes[0];
var objDiv=document.getElementById('show_div');
var inner_html='<table width=100% cellpadding=1 cellspacing=1 bgcolor="1#3333CC" border=0 id="show_tb"><tbody>';
inner_html+=new_return;
inner_html+=objTable.innerHTML;
inner_html+='</tbody></TABLE>';
objDiv.innerHTML=inner_html;
}
} else {
alert(http_request.status);
alert('There was a problem with the request.');
}
}
waiting_div.style.visibility = 'hidden';
}
function ChangeValue(objTD)
{
var objName;
var rep_text_name;
objName = objTD.id;
rep_text_name=objTD.id+"_insert";
var rep_text=document.getElementById(rep_text_name);
var rep_innerhtml;
if(!rep_text){
rep_innerhtml="<input type=text id="+rep_text_name+" name="+rep_text_name+" value="+objTD.innerText+" onBlur=WriteNewValue(this.value,"+objName+"); >";
objTD.innerHTML =rep_innerhtml;
document.all(rep_text_name).focus();
document.all(rep_text_name).select();
}else{
var id;
var cols;
var value;
document.all(rep_text_name).focus();
document.all(rep_text_name).select(); return false;
id=objName.substring(1,objName.length);
cols=objName.substring(0,1);
value=document.all(rep_text_name).value;
url="js-run.asp?id="+id+"&cols="+cols+"&content="+value;
SaveEditValue(url);
}
}
function WriteNewValue(strTxt,objTD)
{
objTD.innerText = strTxt;
var objName;
var rep_text_name;
objName = objTD.id;
id=objName.substring(1,objName.length);
cols=objName.substring(0,1);
value=strTxt;
url="js-run.asp?id="+id+"&cols="+cols+"&content="+value;
SaveEditValue(url);
}
function AddNewValue()
{
var objForm=document.forms[0];
var a,b,c,d,e,url;
a=objForm.elements['a'].value;
b=objForm.elements['b'].value;
c=objForm.elements['c'].value;
d=objForm.elements['d'].value;
e=objForm.elements['e'].value;
url="js-run.asp?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e;
SaveEditValue(url);
return false;
}
//-->
</SCRIPT>
<BODY>
<div id=waiting_div>
<p align=center>正在进行通讯联接!</p>
</div>
<form method="get" οnsubmit="return AddNewValue();" >
<input type=text name=a value="" size="10">
-<input type=text name=b value="" size="10">
-<input type=text name=c value="" size="10">
-<input type=text name=d value="" size="10">
-<input type=text name=e value="" size="10">
-<input type=submit value="添加">
</form>
<TABLE width="500" align="center" cellpadding="1" cellspacing="1" bgcolor="#3333CC">
<!--<TR bgcolor="#FFFFFF">
<TD height="30" width="100">一</TD>
<TD width="100">二</TD>
<TD width="100">三</TD>
<TD width="100">四</TD>
<TD width="100">五</TD>
</TR>-->
<tr><td colspan=5>
<div id="show_div">
<table width=100% cellpadding="1" cellspacing="1" bgcolor="#3333CC" border=0 id="show_tb">
<TR bgcolor="#FFFFFF">
<TD height="30" width="100">一</TD>
<TD width="100">二</TD>
<TD width="100">三</TD>
<TD width="100">四</TD>
<TD width="100">五</TD>
</TR>
<tr>
<%
Set Rs=conn.Execute("select top 3 * from grid order by id desc")
do while not rs.eof
%>
<TR bgcolor="#FFFFFF">
<TD id="a<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("a")%></TD>
<TD id="b<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("b")%></TD>
<TD id="c<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("c")%></TD>
<TD id="d<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("d")%></TD>
<TD id="e<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("e")%></TD>
</TR>
<%
rs.movenext
loop
%>
</TABLE>
</div>
</td></tr>
</BODY>
</HTML>
<script>
document.all('waiting_div').style.visibility = 'hidden';
</script>
js-run.asp
<%@LANGUAGE="VBScript" codepage="936"%>
<!--#include file="root-conn.asp"-->
<%
Response.ContentType = "text/html;charset=GB2312"
dim id,cols,content,sql
id=cint(Request("id"))
cols=Request("cols")
content=Request("content")
if cols="" then
dim a,b,c,d,e
a=Request("a")
b=Request("b")
c=Request("c")
d=Request("d")
e=Request("e")
sql="insert into grid (a,b,c,d,e) values('"&a&"','"&b&"','"&c&"','"&d&"','"&e&"')"
sql_new="select top 1 * from grid order by id desc"
else
sql="update grid set "&cols&"='"&content&"' where id="&id
end if
conn.execute sql
if sql_new<>"" then
Rs=conn.execute(sql_new)
'response.write rs("id")&">>"&rs("a")&">>"&rs("b")&">>"&rs("c")&">>"&rs("d")&">>"&rs("e")
%>
<TR bgcolor="#FFFFFF">
<TD height="30" width="100">一</TD>
<TD width="100">二</TD>
<TD width="100">三</TD>
<TD width="100">四</TD>
<TD width="100">五</TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD id="a<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("a")%></TD>
<TD id="b<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("b")%></TD>
<TD id="c<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("c")%></TD>
<TD id="d<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("d")%></TD>
<TD id="e<%=rs("id")%>" onDblClick="ChangeValue(this);"><%=rs("e")%></TD>
</TR>
<%
end if
%>