庆祝 Joy ASP 上贴数超过800页！！！送给大家一个小礼物 ^

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

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].classname="tabledatahit";
        document.ecform("medication")[line].classname="tabledatahit";

        if (oldline>0)
        {
            document.all.tdt[oldline].classname="tabledata";
            document.ecform("date")[oldline].classname="tabledata";
            document.ecform("diagnosis")[oldline].classname="tabledata";
            document.ecform("medication")[oldline].classname="tabledata";
        }
        currentline=ln
    }
}

function delit()
{
    line=parseint(event.srcelement.ln,10)

    if (line>0)
        for (i=1;i<pllist.rows.length;i++)
            if (tdt[i].ln==line)
            {
                if (document.ecform.diagnosis[i].value.length>0 || document.ecform.medication[i].value.length>0 || document.ecform.date[i].value.length>0)
                    if (!confirm("are you sure you want to delete this record?"))
                        return
                pllist.deleterow(i)
            }
}

function modifiedit(field)
{
// field.value=checktext(field.value);
modified=1

    line=parseint(event.srcelement.ln,10)

    if (line>0)
            for (i=1;i<pllist.rows.length;i++)
                if (tdt[i].ln==line)
                    document.ecform.edit[i].value=1
}

function newhospitalvisit()
{
    newrow=pllist.insertrow(pllist.rows.length);
    newrow.id="tdt";
    newrow.ln=allcount;
    newrow.bgcolor="#e0e0e0";
    newrow.classname="tabledata";
    newrow.onclick=lighton;

    c1=newrow.insertcell(0);
    c1.id="delitem";
    c1.ln=allcount;
    c1.classname="schedulebuttonvisible";
    c1.onclick=delit;
    c1.onmouseover=mouseover;
  c1.onmouseout=mouseout;
    c1.innerhtml="<input type=hidden name=plid value=0><input type=hidden name=edit value=0>";

    c2=newrow.insertcell(1);
    c2.ln=allcount;
    c2.innerhtml="<input type=text size=10 maxlength=10 name=date ln="+allcount+" class=tabledata onkeyup=modifiedit()>"

    c3=newrow.insertcell(2);
    c3.ln=allcount;
    c3.innerhtml="<input type=text size=25 maxlength=50 name=diagnosis ln="+allcount+" class=tabledata onkeyup=modifiedit()>"

    c4=newrow.insertcell(3);
    c4.ln=allcount;
    c4.innerhtml="<input type=text size=58 maxlength=100 name=medication ln="+allcount+" class=tabledata onkeyup=modifiedit()>"

allcount++

}

function mouseover()
{
event.srcelement.classname="delmouseover"
}

function mouseout()
{
event.srcelement.classname="schedulebuttonvisible"
}
</script>

</head>

<tr id="tdt" bgcolor="#0a6846">
<th width="10"><font color=white>
x
<input type="hidden" name="plid">
<input type="hidden" name="edit">
</th>
<th width="10%"><input type="hidden" name="date"><font color="white">date</td>
<th width="30%"><input type="hidden" name="diagnosis"><font color="white">diagnosis</td>
<th width="60%"><input type="hidden" name="medication"><font color="white">medication</td>
</tr>

</table>

<table width="100%" align="center" cellpadding="1" cellspacing="1" border="1" cols="4" bordercolordark="white" bordercolorlight="gray" rules="all" nowrap class="controlpanel">
<tr>
<td align="center" class="controlpanel" onmouseover="this.classname=controlpanelmouseover" onmouseout="this.classname=controlpanel" onclick="newhospitalvisit()">
<font size="2">add a new record, click here</td>
</tr>
</table>

cafecat<br>
august 01,2000

</div>

</form>

</body>
</html>

庆祝 Joy ASP 上贴数超过800页！！！送给大家一个小礼物 ^_^

相关推荐

热门标签

热门文章

分类目录