例子源码：纯DHTML编写的可编辑增删的表格


答案：<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
 BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableData {
 BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataSel {
 BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
 BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataOver {
 BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.controlPanel {
 BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
 BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
 BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.scheduleButtonVisible {
 BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
}
</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>
<BODY bgColor=white>
<FORM method=post name=ecform>
  <META content="MSHTML 5.00.2920.0" name=GENERATOR>
  <DIV id=div1 
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px"> 
    <TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver 
cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
      <TBODY> 
      <TR bgColor=#0a6846 id=tdt> 
        <TH width=10><FONT color=white>X 
          <INPUT name=PLID type=hidden>
          <INPUT 
      name=edit type=hidden>
          </FONT></TH>
        <TH width="10%">
          <INPUT name=date type=hidden>
          <FONT color=white>Date </FONT> 
        <TH width="30%">
          <INPUT name=diagnosis type=hidden>
          <FONT 
      color=white>Diagnosis </FONT> 
        <TH width="60%">
          <INPUT name=medication type=hidden>
          <FONT 
      color=white>Medication </font>
      </TR>
      <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1"> 
        <
上一个：按下回车键指向下一个位置的一个函数
下一个：利用JScript/CSS 编程技术模拟实现TABView控件
更多图片编程知识: