本文送给Joy ASP和所有喜欢DHTML的朋友,特别是Zee,感谢他提供的帮助。
这是一个纯DHTML编写的可编辑/增删的“表格”
1 可以直接在里面编辑
2 用最下方的按钮增加新行
3 用每行最左边的按钮删除本行
所有输入都保存在form中,提交后server端可以得到所有数据进行处理。
由于本页面截取自实用系统,可能会有一些冗余代码,当做没看见好了。为了方便演示,删掉了数据检验,提交部分。
使用环境:IE5
<HTML>
<head>
<META content="CafeCat" name=Author>
<Style TYPE="text/CSS">
body {cursor:arrow; color:black; background:white; font-family:verdana,arial,helvetica; font-size:12px; font-style:regular; }
.tableData {cursor:hand; color:black; background:white; font-family:verdana,arial,helvetica; font-size:12px; font-style:regular; BORDER-BOTTOM:white dashed 1px; BORDER-LEFT:white dashed 1px; BORDER-RIGHT:white dashed 1px; BORDER-TOP:white dashed 1px}
.tableDataSel {cursor:hand; color:white; background:#6090d0; font-family:verdana,arial,helvetica; font-size:12px; font-style:regular; BORDER-BOTTOM:#6090d0 dashed 1px; BORDER-LEFT:#6090d0 dashed 1px; BORDER-RIGHT:#6090d0 dashed 1px; BORDER-TOP:#6090d0 dashed 1px}
.tableDataHit {cursor:hand; color:black; background:#d0e0ff; font-family:verdana,arial,helvetica; font-size:12px; font-style:regular; BORDER-BOTTOM:#d0e0ff dashed 1px; BORDER-LEFT:#d0e0ff dashed 1px; BORDER-RIGHT:#d0e0ff dashed 1px; BORDER-TOP:#d0e0ff dashed 1px}
.tableDataOver {cursor:hand; color:black; background:#d0e0ff; font-family:verdana,arial,helvetica; font-size:12px; font-style:regular; BORDER-BOTTOM:#d0e0ff dashed 1px; BORDER-LEFT:#d0e0ff dashed 1px; BORDER-RIGHT:#d0e0ff dashed 1px; BORDER-TOP:#d0e0ff dashed 1px}
.controlPanel {cursor:hand; color:black; background:silver; font-family:verdana,arial,helvetica; font-size:14px; font-style:regular;}
.controlPanelMouseOver {cursor:hand; color:black; background:#d0e0ff; font-family:verdana,arial,helvetica; font-size:14px; font-style:regular;}
.delMouseOver {cursor:hand; color:black; background:#d0e0ff; font-family:verdana,arial,helvetica; font-size:14px; font-style:regular;}
.scheduleButtonVisible {cursor:hand; color:black; background:silver; font-family:webdings; font-size:12px; font-style:regular; BORDER-BOTTOM:gray dashed 1px; BORDER-LEFT:white dashed 1px; BORDER-RIGHT:gray dashed 1px; BORDER-TOP:white dashed 1px}
</style>
<script language="javascript">
var modified=0
var currentLine=-1
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==ln)
line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==cln)
oldLine=i
if (line==oldLine)
return
//if td <0 then only clear all title
if (line>0)
{
document.all.tdt[line].className="tableDataHit";
document.ecform("date")[line].className="tableDataHit";
document.ecform("diagnosis")[line].