将table做成类似VB中grid的功能,急用！

是不是这样
<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>

解决方案 »

  1.   

    <BODY bgColor=white>
    <META content="MSHTML 5.00.2920.0" name=GENERATOR>
    <FORM method=post name=ecform>
      <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"> 
              <TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut() onmouseover=mouseOver() 
                ln="1">
                <FONT size=2>
                  <INPUT name=PLID type=hidden value=54 ln="1">
                  <INPUT name=edit type=hidden value=0>
                </FONT>
              </TD>
              <TD ln="1">
                <INPUT class=tableData maxLength=10 name=date onkeyup=modifiedIt(this) size=10 ln="1">
              </TD>
              <TD ln="1">
                <INPUT class=tableData maxLength=50 name=diagnosis onkeyup=modifiedIt(this) size=25 
                  value="what do you think of it?" ln="1">
              </TD>
              <TD ln="1">
                <INPUT class=tableData maxLength=100 name=medication onkeyup=modifiedIt(this) size=58 
                  value="like it?" ln="1">
              </TD>
            </TR>
            <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2"> 
              <TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut() onmouseover=mouseOver() 
                ln="2">
                <FONT size=2>
                  <INPUT name=PLID type=hidden value=55 ln="2">
                  <INPUT name=edit type=hidden value=0>
                </FONT>
              </TD>
              <TD ln="2">
                <INPUT class=tableData maxLength=10 name=date onkeyup=modifiedIt(this) size=10 
                  value=01/01/1999 ln="2">
              </TD>
              <TD ln="2">
                <INPUT class=tableData maxLength=50 name=diagnosis onkeyup=modifiedIt(this) size=25 
                  value="it`s a test" ln="2">
              </TD>
              <TD ln="2">
                <INPUT class=tableData maxLength=100 name=medication onkeyup=modifiedIt(this) size=58 
                  value="how about it?" ln="2">
              </TD>
            </TR>
            <TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3"> 
              <TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut() onmouseover=mouseOver() 
                ln="3">
                <FONT size=2>
                  <INPUT name=PLID type=hidden value=56 ln="3">
                  <INPUT name=edit type=hidden value=0>
                </FONT>
              </TD>
              <TD ln="3">
                <INPUT class=tableData maxLength=10 name=date onkeyup=modifiedIt(this) size=10 
                  value=02/01/2000 ln="3">
              </TD>
              <TD ln="3">
                <INPUT class=tableData maxLength=50 name=diagnosis onkeyup=modifiedIt(this) size=25 
                  value="another test" ln="3">
              </TD>
              <TD ln="3">
                <INPUT class=tableData maxLength=100 name=medication onkeyup=modifiedIt(this) size=58 ln="3">
              </TD>
            </TR>
          </TBODY>
        </TABLE>
    <SCRIPT>
    //*******************************************************************************************************
      allCount=4
    //*******************************************************************************************************
    </SCRIPT>
      <TABLE align=center border=1 borderColorDark=white borderColorLight=gray cellPadding=1 cellSpacing=1 
        class=controlPanel cols=4 rules=all width="100%" nowrap>
        <TBODY> 
          <TR> 
            <TD align=middle class=controlPanel onclick=newHospitalVisit() 
              onmouseout="this.className='controlPanel'" onmouseover="this.className='controlPanelMouseOver'">
              <FONT size=2>Add a New Record, click here</FONT>
            </TD>
          </TR>
      </TBODY>
    </TABLE>
    </DIV>
    </FORM>
    </BODY>
    </HTML>
      

  2.   

    可是可以不过我权你不要这样做，这样太麻烦了，可以给你一个别人做的东西
    http://211.100.7.119/web_app/web_Exel/webexel.html
    网页完全模仿grid你会处理死的，纯粹从某些功能角度来讲的确b/s没有c/s灵活