数据表 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 %>
