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

按这个Demo 自己改改。<!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.   

    http://www.ruzuo.net/space.php?uid=93&do=album&picid=2600
    看看这个，我有加了一些说明。
      

  2.   


    <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>