点击增加或删除按钮,怎么使表格自动增加一行和删除一行???求各位大侠帮忙

这是以前老帖子了，你也可以再搜索一下:
在JavaScript版经常看到有人关于在线可编辑表格的问题，于是整理了出来。主要功能：1.动态增加行2.可以点击表格左边的按钮删除当前行，如果该行有数据会要求用户确认删除3.表格可以实现动态编辑4.通过点击某一行可以实现高亮度显示源代码：＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝<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//该变量似乎保存"ln"属性；lightOn函数中line记录实际行数
var line=-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>
    <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"> 
            <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.   

    <html>
    <script>
    function add()
    { var i=0;
    var t = document.getElementById("table1");
    var count=0;//t.rows.length+1;
    t.insertRow().insertCell().innerHTML="<input type=text name=gwname" + count + ">";
    t.insertRow().insertCell().innerHTML="<input type=text name=gwduty" + count + ">";
      i++
    }
    function del(){
    var i=0;
    var ee=document.getElementById(String("gwname"+i));
    var aa=document.getElementById(String("gwduty"+i));
    ee.removeNode(true);
    aa.removeNode(true);
    }
    </script>
    <table id="table1">
        <input type=button value="增加岗位" onclick=add()>
            <input type=button value="删除岗位" onclick=del()>
    </table>
    </html>