日期:2009-06-30  浏览次数:21140 次

本文送给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].