本文送给Joy ASP和所有喜欢DHTML的朋友,特别是Zee,感谢他提供的帮助。
这是一个纯DHTML编写的可编辑/增删的“表格”
1 可以直接在里面编辑
2 用最下方的按钮增加新行
3 用每行最左边的按钮删除本行
所有输入都保存在form中,提交后server端可以得到所有数据进行处理。
由于本页面截取自实用系统,可能会有一些冗余代码,当做没看见好了。为了方便演示,删掉了数据检验,提交部分。
使用环境:IE5
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}
var modified=0
var currentLine=-1
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i if (tdt[i].ln==ln) line=i cln=currentLine oldLine=-1 for (i=1;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 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 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=""; c2=newRow.insertCell(1); c2.ln=allCount; c2.innerHTML="" c3=newRow.insertCell(2); c3.ln=allCount; c3.innerHTML="" c4=newRow.insertCell(3); c4.ln=allCount; c4.innerHTML="" allCount++ } function mouseOver() { event.srcElement.className="delMouseOver" } function mouseOut() { event.srcElement.className="scheduleButtonVisible" } X allCount=4 Add a New Record, click here CafeCat August 01,2000
Date
Diagnosis
Medication

