28,391
社区成员
发帖
与我相关
我的任务
分享[发布]可编辑并可提交的页面Grid实现...
今天闲的无聊，写点script存在csdn上，如果对你有用，告诉我，让我开心下。
用途：
bs开发中经常需要把一个类似Excel的可编辑界面展示给客户，编辑完成后还需要提交到数据库，给出个最简单的实现例子，用于实现可编辑。后续功能需要javascript和css的进一步实现。
ok,多多交流。
MSN: woderoom@hotmail.com [小杨]
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
// For enjoy myself...
// At 2004/07/20
// YangGuoqing
// woderoom@hotmail.com
var myGrid = new Object();
myGrid.onEdit = false;
function doInit()
{
var curForm = document.frmMain;
for (var i=0;i<curForm.elements.length;i++)
{
var obj = curForm.elements[i];
if (obj.type == "text"){
obj.attachEvent("ondblclick",doEditable);
obj.attachEvent("onblur",doDisEditabel);
obj.attachEvent("onmouseover",doMouseOver);
obj.attachEvent("onmouseout",doMouseOut);
}
}
}
function doEditable()
{
event.srcElement.readOnly = false;
var txtRng = event.srcElement.createTextRange();
txtRng.moveStart("character",event.srcElement.value.length);
txtRng.select();
event.srcElement.className = "txtOn";
myGrid.onEdit = true;
}
function doDisEditabel()
{
event.srcElement.readOnly = true;
event.srcElement.className = "txtOff";
myGrid.onEdit = false;
}
function doMouseOver()
{
if(!myGrid.onEdit){
event.srcElement.className = "txtOn";
}
}
function doMouseOut()
{
if(!myGrid.onEdit){
event.srcElement.className = "txtOff";
}
}
//-->
</SCRIPT>
<style type="text/css">
<!--
.txtOff {
height: 20px;
width: 100px;
border-color: black black #000000;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-size: 9pt;
background-color: #FFFFFF;
color: #000000
}
.txtOn {
height: 20px;
width: 100px;
border-color: black black #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-size: 9pt;
background-color: #FFFFFF;
color: #0000FF
}
-->
</style>
</HEAD>
<BODY onload="doInit();">
<FORM METHOD=POST ACTION="" name="frmMain">
<TABLE width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<TR bgcolor="#FFFFFF">
<TD height="20"><INPUT type="text" name="edit1" value="111" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit2" value="222" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit3" value="333" size=10 readOnly class="txtOff"></TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD height="20"><INPUT type="text" name="edit4" value="444" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit5" value="5555" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit6" value="66666" size=10 readOnly class="txtOff"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
用途：
bs开发中经常需要把一个类似Excel的可编辑界面展示给客户，编辑完成后还需要提交到数据库，给出个最简单的实现例子，用于实现可编辑。后续功能需要javascript和css的进一步实现。
ok,多多交流。
MSN: woderoom@hotmail.com [小杨]
------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
// For enjoy myself...
// At 2004/07/20
// YangGuoqing
// woderoom@hotmail.com
var myGrid = new Object();
myGrid.onEdit = false;
function doInit()
{
var curForm = document.frmMain;
for (var i=0;i<curForm.elements.length;i++)
{
var obj = curForm.elements[i];
if (obj.type == "text"){
obj.attachEvent("ondblclick",doEditable);
obj.attachEvent("onblur",doDisEditabel);
obj.attachEvent("onmouseover",doMouseOver);
obj.attachEvent("onmouseout",doMouseOut);
}
}
}
function doEditable()
{
event.srcElement.readOnly = false;
var txtRng = event.srcElement.createTextRange();
txtRng.moveStart("character",event.srcElement.value.length);
txtRng.select();
event.srcElement.className = "txtOn";
myGrid.onEdit = true;
}
function doDisEditabel()
{
event.srcElement.readOnly = true;
event.srcElement.className = "txtOff";
myGrid.onEdit = false;
}
function doMouseOver()
{
if(!myGrid.onEdit){
event.srcElement.className = "txtOn";
}
}
function doMouseOut()
{
if(!myGrid.onEdit){
event.srcElement.className = "txtOff";
}
}
//-->
</SCRIPT>
<style type="text/css">
<!--
.txtOff {
height: 20px;
width: 100px;
border-color: black black #000000;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-size: 9pt;
background-color: #FFFFFF;
color: #000000
}
.txtOn {
height: 20px;
width: 100px;
border-color: black black #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-size: 9pt;
background-color: #FFFFFF;
color: #0000FF
}
-->
</style>
</HEAD>
<BODY onload="doInit();">
<FORM METHOD=POST ACTION="" name="frmMain">
<TABLE width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<TR bgcolor="#FFFFFF">
<TD height="20"><INPUT type="text" name="edit1" value="111" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit2" value="222" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit3" value="333" size=10 readOnly class="txtOff"></TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD height="20"><INPUT type="text" name="edit4" value="444" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit5" value="5555" size=10 readOnly class="txtOff"></TD>
<TD><INPUT type="text" name="edit6" value="66666" size=10 readOnly class="txtOff"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
...全文
请发表友善的回复…
发表回复
sky9705 2004-11-23
- 打赏
- 举报
楼主，可不可以多点？
我要让表格可以编辑，最后能提交给数据库。
提交方面我的方法是通过XMLHttp，希望能和老兄交流：linbaba@hotmail.com
我已加你Msn
我要让表格可以编辑，最后能提交给数据库。
提交方面我的方法是通过XMLHttp，希望能和老兄交流：linbaba@hotmail.com
我已加你Msn
guoweidong 2004-07-20
- 打赏
- 举报
啊,不能输入中文,还有个,你把样式也固定死了.
suiyi999 2004-07-20
- 打赏
- 举报
我真崇拜你，大哥，收我这个小弟吧
www0aspsun0com 2004-07-20
- 打赏
- 举报
你太猛了！
