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

作者： unknow

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

<form name="ecform" method="POST">

<body bgcolor="white">

<div id="div1" style="visibility:visible; position:absolute; left:0; top:0; cursor:arrow; width:658;">

<table id="PLList" width="100%" cellpadding="2" cellspacing="1" bordercolordark="Gray" bordercolorlight="Silver" bgcolor="Silver" border="2" cols="1" rules="ROWS">

<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>

    <tr id="tdt" ln="1" bgcolor="#e0e0e0" class="tableData" onclick="lightOn()">
    <td ln="1" class="scheduleButtonVisible" onclick="delIt()" onmouseover="mouseOver()" onmouseout="mouseOut()"><font size="2">
    <input type="hidden" ln="1" name="PLID" value="54">
    <input type="hidden" name="edit" value="0">
    </td>
    <td ln="1"><input type="text" size="10" maxlength="10" name="date" ln="1" class="tableData" value="" onkeyup="modifiedIt(this)"></td>
    <td ln="1"><input type="text" size="25" maxlength="50" name="diagnosis" ln="1" class="tableData" value="what do you think of it?" onkeyup="modifiedIt(this)"></td>
    <td ln="1"><input type="text" size="58" maxlength="100" name="medication" ln="1" class="tableData" value="like it?" onkeyup="modifiedIt(this)"></td>
    </tr>

    <tr id="tdt" ln="2" bgcolor="#e0e0e0" class="tableData" onclick="lightOn()">
    <td ln="2" class="scheduleButtonVisible" onclick="delIt()" onmouseover="mouseOver()" onmouseout="mouseOut()"><font size="2">
    <input type="hidden" ln="2" name="PLID" value="55">
    <input type="hidden" name="edit" value="0">
    </td>
    <td ln="2"><input type="text" size="10" maxlength="10" name="date" ln="2" class="tableData" value="01/01/1999" onkeyup="modifiedIt(this)"></td>
    <td ln="2"><input type="text" size="25" maxlength="50" name="diagnosis" ln="2" class="tableData" value="it`s a test" onkeyup="modifiedIt(this)"></td>
    <td ln="2"><input type="text" size="58" maxlength="100" name="medication" ln="2" class="tableData" value="how about it?" onkeyup="modifiedIt(this)"></td>
    </tr>

    <tr id="tdt" ln="3" bgcolor="#e0e0e0" class="tableData" onclick="lightOn()">
    <td ln="3" class="scheduleButtonVisible" onclick="delIt()" onmouseover="mouseOver()" onmouseout="mouseOut()"><font size="2">
    <input type="hidden" ln="3" name="PLID" value="56">
    <input type="hidden" name="edit" value="0">
    </td>
    <td ln="3"><input type="text" size="10" maxlength="10" name="date" ln="3" class="tableData" value="02/01/2000" onkeyup="modifiedIt(this)"></td>
    <td ln="3"><input type="text" size="25" maxlength="50" name="diagnosis" ln="3" class="tableData" value="another test" onkeyup="modifiedIt(this)"></td>
    <td ln="3"><input type="text" size="58" maxlength="100" name="medication" ln="3" class="tableData" value="" onkeyup="modifiedIt(this)"></td>
    </tr>


</table>

<script>
allCount=4
</script>

<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>

返回顶部

下一篇：自己动手，结合javascript和dhtml做一个ubb编辑器(附例子代码) >>

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

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