跪求一个动态表格，是答对奉献100分！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>function add(){
    var tab =  document.getElementById('tab');
    if(tab){
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        var td1 = document.createElement('td');
        td.innerHTML ='cccc';
        td.style.border = '1px red solid';
        td1.innerHTML ='dddd';
        td1.style.border = '1px red solid';
        tr.appendChild(td);
        tr.appendChild(td1);
        tab.childNodes[0].appendChild(tr);
    }
}
function del(){
    var tab =  document.getElementById('tab');
    if(tab.childNodes[0].lastChild){
        tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
    }}
  </script>
 </HEAD> <BODY >
  <table id='tab' style='border:1px red solid'>
  <tr>
  <td style='border:1px red solid'>aaa</td>
  <td style='border:1px red solid'>bbb</td>
  </tr>
  </table>  <input type=button value=add onclick='add()'/>
  <input type=button value=del onclick='del()'/>
 </BODY>
</HTML>

解决方案 »

  1.   

    楼上已经很好，不过用function delRow()
      {
      document.getElementById('tab').deleteRow(index)
      }
    按照索引可以删除任意行，index可以用参数带进去…
      

  2.   


    <head><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   
      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("medication")[line].className="tableDataHit";   
          if   (oldLine>0)   
          {   
            document.all.tdt[oldLine].className="tableData";   
            document.ecform("medication")[oldLine].className="tableData";   
          }   
          currentLine=ln   
      }   
      }   
        
      function   move(direc){   
      //向下移动direc行，并将移动到的行高亮度显示   
        
      if(line+direc<1   ||   (line+direc)>document.all.tdt.length-1)   return;   
      var   temp=document.ecform.medication[line].value;   
      document.ecform.medication[line].value=document.ecform.medication[line+direc].value;   
      document.ecform.medication[line+direc].value=temp   
        
      line+=direc;   
      lightOn(line);   
      }   
      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.medication[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=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>   
      
      

  3.   


    </head><body><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=80><FONT   color=white>删除     
                          <INPUT   name=PLID   type=hidden>   
                          <INPUT     
                  name=edit   type=hidden>   
                          </FONT></TH>   
                      <TH   width="559">     
                          <INPUT   name=medication   type=hidden>   
                          <FONT     
                  color=white>变化表格   </font>     
                  </TR>   
                  <TR   bgColor=#e0e0e0   class=tableData   id=tdt   onclick=lightOn()   ln="1">     
                      <TD   class=scheduleButtonVisible   onclick=delIt()   onmouseout=mouseOut()     
              onmouseover=mouseOver()   ln="1"   width="80"><FONT   size=2>     
                          <INPUT   name=PLID   type=hidden     
                  value=54   ln="1">   
                          <INPUT   name=edit   type=hidden   value=0>   
                          </FONT></TD>   
                      <TD   ln="1"   width="559">     
                          <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"   width="80"><FONT   size=2>     
                          <INPUT   name=PLID   type=hidden     
                  value=55   ln="2">   
                          <INPUT   name=edit   type=hidden   value=0>   
                          </FONT></TD>   
                      <TD   ln="2"   width="559">     
                          <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"   width="80"><FONT   size=2>     
                          <INPUT   name=PLID   type=hidden     
                  value=56   ln="3">   
                          <INPUT   name=edit   type=hidden   value=0>   
                          </FONT></TD>   
                      <TD   ln="3"   width="559">     
                          <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"   face="仿宋_GB2312,   楷体_GB2312">添加一行</font></TD>   
                  </TR>   
                  <TR>     
                      <TD   align=middle   class=controlPanel   onclick=move(-1)     
              onmouseout="this.className='controlPanel'"     
              onmouseover="this.className='controlPanelMouseOver'"><font   size="2"   face="仿宋_GB2312,   楷体_GB2312">向上移动</font></TD>   
                  </TR>   
                  <TR>     
                      <TD   align=middle   class=controlPanel   onclick=move(1)     
              onmouseout="this.className='controlPanel'"     
              onmouseover="this.className='controlPanelMouseOver'"><font   size="2"   face="仿宋_GB2312,   楷体_GB2312">向下移动</font></TD>   
                  </TR>   
                  </TBODY>     
              </TABLE>   
          </DIV>   
      </FORM></body><p><b>Collected   by   38JS.COM</b></p>
     <html>   
      <head>   
      <title>   动态表格实例</title>   
      <style>   
      .curr   {background-color:blue;color:white}   
      </style>   
      <script   language="JavaScript">   
      var   curRow   =   null;   
        
      function   setrow(){   
        var   e   =   event.srcElement;   
        if(e.tagName=="TD"   &&   tab1.contains(e)){   
            curRow   =   e.parentNode;   
            updateRow();   
        }   
        else   curRow=null;   
      }   
        
      function   doEdit(bSave){   
        if(curRow==null)   return;   
        var   i;   
        for(var   i=0;   i<curRow.cells.length;i++){   
          if(bSave)   
          curRow.cells[i].innerText   =   document.getElementsByName("txt")[i].value;   
          else   
          document.getElementsByName("txt")[i].value   =   curRow.cells[i].innerText;   
          }   
      }   
        
      function   doInsert(){   
          var   r=tab1.insertRow();   
          for(var   i=0;   i<tab1.rows[0].cells.length;i++){   
              r.insertCell(i).innerText   =   document.getElementsByName("txt")[i].value;   
          }   
          curRow   =   r;   
          updateRow();   
      }   
      function   doDelete(){   
        if(tab1.rows.length<2   ||   !curRow)   return;   
        curRow.removeNode(true);   
        curRow=null;   
        updateRow();   
      }   
      function   updateRow(){   
          var   rows=tab1.rows;   
          for(var   i   in   rows)   
              rows[i].className   =   (curRow==rows[i])   ?   "curr"   :   ""   
      }   
      </script>   
      </head>   
      <body>   
      动态表格实例<br/>   
      <table   id=tab1   border=1   width=500   onclick="setrow()">   
      <tr><td>00</td><td>01</td><td>02</td></tr>   
      <tr><td>10</td><td>11</td><td>12</td></tr>   
      <tr><td>20</td><td>21</td><td>22</td></tr>   
      <tr><td>30</td><td>31</td><td>32</td></tr>   
      </table>   
      <input   name=txt><input   name=txt><input   name=txt><br/>   
      <button   onclick="doEdit(false)">Edit</button>   
      <button   onclick="doEdit(true)">Save</button>   
      <button   onclick="doInsert()">Insert</button>   
      <button   onclick="doDelete()">delete</button>   
      </body>   
      </html>
      

  4.   


    <html>
    <head>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>动态增删表格caiying2009</title>
    <style>
    *{font-size:12px;}
    td{height:20px;}
    .td1{width:55px}
    .td2{width:80px}
    .td3{width:60px}
    .td4{width:135px;CURSOR: pointer}
    </style>
    </head>
    <body>
    <table border="1" cellspacing="0" cellpadding="0" id="table2" >
    <tr>
    <td class=td1 width="54">试题</td>
    <td class=td2 width="75">选项类型</td>
    <td class=td3 width="67">分值</td>
    <td class=td4 title="双击显示增删按钮">选项</td>
    </tr>
    </table><div id=menuCon style="position:absolute;display:none">
    <input type=button value="增加"><input type=button value="删除">
    </div>
    <script language="javascript">
    <!--
    var objTAB
    var maxTR=4;//“小行”（分值／选项）行数
    onload=function(){
    objTAB=document.getElementById("table2")
    objTAB.ondblclick=function(){setMenu(event)}
    }
    function setMenu(e){
    var eTd=$$(e,"td")//点击的TD对象
    var eTr=$$(e,"tr")//点击的TR对象
    if(eTd.cellIndex>=eTr.cells.length-1 &&eTr.rowIndex==0 &&objTAB.rows.length<2){showMenu(eTr);hidDelBt();}//for 表格头行
    else if (eTd.cellIndex>=eTr.cells.length-1 && eTr.rowIndex==objTAB.rows.length-1){showMenu(eTr);showDelBt()}//for 表格体行
    }function showMenu(eTr){
    with($("menuCon")){
    getElementsByTagName("input")[0].onclick=function(){ (eTr.rowIndex*1%maxTR==0)?addRows(eTr,true):addRows(eTr,false)}//“大行”：“小行”
    getElementsByTagName("input")[1].onclick=function(){ delRows(eTr)}
    var p=getPosition(eTr)
    style.top=p[1]+"px"
    style.left=p[0]+p[3]+"px"
    style.display=""
    getElementsByTagName("input")[0].focus()
    }
    document.onclick=function (){setMent()}//页面点击事件（关闭菜单）
    }var allTr=0;//用于:“大行”标记(tr.id="tr_"+allTr) //“大行”跨越“小行”多少行（$("tr_"+allTr).cells[0].rowSpan=）//“试题”序号("试题"+allTr)
    function addRows(esrc,c){//添加TR & TD
    var tr=objTAB.insertRow()//添加TR
    if (c){//“大行”
    tr.insertCell().className="td1"//添加TD及其样式
    tr.insertCell().className="td2"//添加TD及其样式
    }
    tr.insertCell().className="td3"//添加TD及其样式
    tr.insertCell().className="td4"//添加TD及其样式
    if (c){//“大行”（试题／选项类型）
    allTr++
    tr.id="tr_"+allTr
    tr.cells[0].innerHTML="试题"+allTr//填写单元格(试题)
    tr.cells[1].innerHTML="单选/多选"//填写单元格(选项类型)
    tr.cells[2].innerHTML=tr.rowIndex//填写单元格(分值)
    tr.cells[3].innerHTML=tr.rowIndex%maxTR//填写单元格(选项)
    tr.cells[3].title="双击显示增删按钮"
    }
    else{//“小行”（分值／选项）
    tr.cells[0].innerHTML=tr.rowIndex//填写单元格(分值)
    tr.cells[1].innerHTML=tr.rowIndex%maxTR//填写单元格(选项)
    tr.cells[1].title="双击显示增删按钮"
    }
    $("tr_"+allTr).cells[0].rowSpan=tr.rowIndex%maxTR==0?maxTR:tr.rowIndex%maxTR;
    $("tr_"+allTr).cells[1].rowSpan=tr.rowIndex%maxTR==0?maxTR:tr.rowIndex%maxTR;
    }function delRows(esrc){
    if (esrc.id)allTr--
    objTAB.deleteRow(esrc.rowIndex)
    }function hidDelBt(){//隐藏“删除”按钮 for 表格头行
    $("menuCon").getElementsByTagName("input")[1].style.display="none"
    }function showDelBt(){//显示“删除”按钮 for 表格体行 
    $("menuCon").getElementsByTagName("input")[1].style.display=""
    }function setMent(){//菜单容器外点击关闭菜单
    var esrc=$$(event)
    if (esrc!=$("menuCon"))delMenu()
    }function delMenu(){//删除菜单
    with($("menuCon")){
    getElementsByTagName("input")[0].onclick=null
    getElementsByTagName("input")[1].onclick=null
    style.display="none"
    }
    document.onclick=null
    }function $$(e,c){//返回事件的源对象
    var event = window.event || e;
    var esrc = event.srcElement || event.target;
    if (c)//如果有参数C,返回事件的源对象的C父级对象
    while(esrc.tagName.toLowerCase()!=c)esrc=esrc.parentNode
    return esrc
    }function $(id){return document.getElementById(id)}//获取指定对象function getPosition(theElement){//获取坐标
    var positionX =0;
    var positionY =0;
    var positionH=theElement.offsetHeight
    var positionW=theElement.offsetWidth
    while (theElement !=null){
    positionX +=theElement.offsetLeft;
    positionY +=theElement.offsetTop;
    theElement =theElement.offsetParent;
    }
    return [positionX,positionY,positionH,positionW];
    }//--></script></body></html>