动态插入table

用 document.createElement("TABLE") 或者 innerHTML 的方式添加就是了

解决方案 »

  1.   

    <body>
    <input name=button1 type="button" value="增加表" onclick=addTable(document.body)>
    <script language=javascript>
    function addTable(obj)
    {
    var objtable=document.createElement("table")
    objtable.border="1"
    var objtbody=document.createElement("tbody")
    objtable.appendChild(objtbody)
    for(var i=0;i<3;i++)
    {
    objTr=document.createElement("tr")
    objtbody.appendChild(objTr)
    for(var j=0;j<3;j++)
    {
    objTd=document.createElement("td")
    objTd.appendChild(document.createElement("<input name=button1 type=button value='增加表' onclick='addTable(this.parentNode)'>"))
    objTr.appendChild(objTd)
    }
    }
    obj.appendChild(objtable);
    }
    </script>
      

  2.   

    按照你的要求加了个删除表的功能
    <body>
    <input name=button1 type="button" value="增加表" onclick=addTable(document.body)>
    <script language=javascript>
    function addTable(obj)
    {
    var objtable=document.createElement("table")
    objtable.border="1"
    var objtbody=document.createElement("tbody")
    objtable.appendChild(objtbody)
    for(var i=0;i<3;i++)
    {
    objTr=document.createElement("tr")
    objtbody.appendChild(objTr)
    for(var j=0;j<3;j++)
    {
    objTd=document.createElement("td")
    objTd.appendChild(document.createElement("<input name=button1 type=button value='增加表' onclick='addTable(this.parentNode)'>"))
    objTd.appendChild(document.createElement("<input name=button2 type=button value='删除表' onclick='deleteTable(this.parentNode.parentNode.parentNode.parentNode)'>"))
    objTr.appendChild(objTd)
    }
    }
    obj.appendChild(objtable);
    }
    function deleteTable(obj)
    {
    obj.removeNode(true)
    }
    </script>
      

  3.   

    re
    谢谢你了
    你给的不是我想要的JS,可能是我没把问题说清楚吧问题是这样的:一个页面上有三个主要信息:一个学生基本信息(表格),一个学生家庭成员信息(表格),一个是成绩信息(表格);在家庭成员表格内,可以添加任意个家庭成员信息(表格);同理,成绩信息表里也可以添加任意个科目信息(表格);
    这样的JS怎样写呢?谢谢了
    (注:添加与删除都有)----------------------------------------------------
    还不是吗？
    那这个呢？参考下，可以实现的。
    <form name="form1" method="post" action="">
      <input type="button" name="Submit" value="-"  onclick="deleteRow()">
      <input name="num" type="text" value="2" size="4" maxlength="4">
      <input type="button" name="Submit2" value="+" onclick="insertRow()">
      <br>
      <table id="table1" width="500" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td width="87">学生编号</td>
          <td width="277">学生姓名</td>
          <td width="136">学生年龄</td>
        </tr>
        <tr>
          <td>001</td>
          <td>张三</td>
          <td>20</td>
        </tr>
      </table>
    </form>
    <script language=javascript>
    function deleteRow()
    {
    var obj=document.getElementById("table1")
    var rowIndex=obj.childNodes[0].childNodes.length;
    if(rowIndex>1)
    {
    document.getElementById("num").value=document.getElementById("num").value-parseInt(1)
    obj.deleteRow(rowIndex-parseInt(1));
    }
    }
    function insertRow()
    {
    var obj=document.getElementById("table1")
    var rowIndex=obj.childNodes[0].childNodes.length;
    var objTR=obj.insertRow(rowIndex);
    var objTD1=objTR.insertCell();
    var objTD2=objTR.insertCell();
    var objTD3=objTR.insertCell();
    rowIndex2=parseInt(rowIndex)+parseInt(1)
    objTD1.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[0].innerHTML
    objTD2.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[1].innerHTML
    objTD3.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[2].innerHTML
    document.getElementById("num").value=parseInt(document.getElementById("num").value)+parseInt(1)
    }
    </script>
      

  4.   

    谢谢hbhbhbhbhb1021(天外水火(我要多努力)) 虽然现在问题没有解决,但你的热心,我由衷地表示感谢...........现在这个问题不是很急迫了,但我暂时不结贴,看看能不能实现这样的效果.........请各位高人继续指点,谢谢了