该怎样用innerHTML实现动态表格，我找了一下相关的网页，但找不到相似的

  <table class="selfdefineTable" id="newOption">
                  <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>操作</th>
                  </tr>
                </table>
                <div class="btnAdd"><a href="javascript:add();">再增加一行</a> </div>
jsfunction add()
{
     window.status ="";
 var temp = document.getElementById("newOption");
 temp.insertRow(temp.rows.length);
    var trlength=temp.rows.length  ;//索引值
temp.rows.item(trlength -1).insertCell(0);
temp.rows.item(trlength -1).insertCell(1);
temp.rows.item(trlength -1).insertCell(2);
temp.rows.item(trlength -1).insertCell(3);
temp.rows.item(trlength -1).insertCell(4);   var sHTML0 = "<input name=\"\" type=\"text\" class=\"inputText\"  value=\"\" />";
  var sHTML1 = "<input name=\"\" type=\"text\" class=\"inputText\"  value=\"\" />";
  var sHTML2 = "<input name=\"\" type=\"text\" class=\"inputText\"  value=\"\" />";
  var sHTML3 = "<textarea style=\"width:150px;height:50px;\" name=\"\" onkeyup=\"countLeft(this,140)\"/></textarea><br><span>140</span>";
  var sHTML4 = "<span class=\"btnDel\"><a style=\"width:20px;\" onclick=\"Delete(this.parentNode.parentNode.parentNode.rowIndex);\"><img src=\"../skins/common/icon_del.gif\" alt=\"删除\"/></a></span>";
temp.rows.item(trlength-1).cells.item(0).innerHTML= sHTML0;
temp.rows.item(trlength-1).cells.item(1).innerHTML= sHTML1;
temp.rows.item(trlength-1).cells.item(2).innerHTML= sHTML2;
temp.rows.item(trlength-1).cells.item(3).innerHTML= sHTML3;
temp.rows.item(trlength-1).cells.item(4).innerHTML= sHTML4;

}
function Delete(x)
{ 
 var temp = document.getElementById("newOption");
/* if(confirm("确定删除？"))
 {
 */
 temp.deleteRow(x);
/* }*/
 
}

解决方案 »

  1.   

    你这不挺好用的？
    <html> 
    <head> <title>新闻系统 </title> <style type="text/css"> 
    <!-- 
    .新增 {font-size: medium} 
    .STYLE1 {font-size: large} 
    #Layer1 { 
    position:absolute; 
    width:836px; 
    height:282px; 
    z-index:1; 
    left: 15px; 
    top: 42px; 
    } 
    #Layer2 { 
    position:absolute; 
    width:597px; 
    height:115px; 
    z-index:1; 
    left: 21px; 
    top: 117px; 
    } 
    --> 
    </style> 
    <script language="javascript"> function  len(){ 
    document.getElementById("Layer2").style.display="block"; 
    } 
    function add(){ 
    var x=document.getElementById('mytable').insertRow(-1) 
    var y1=x.insertCell(0) 
    var y2=x.insertCell(1) 
    var y3=x.insertCell(2) 
    var y4=x.insertCell(3) 
    var y5=x.insertCell(4) 
    var y6=x.insertCell(5) 
    y1.innerHTML=x.rowIndex.toString(); 
    y2.innerHTML=" <input name='TEXT'/>";//问题在这，form李的内容不会显示在新增的表格里，要怎样改才能把实现呢？ 
    y3.innerHTML='aa'; 
    y4.innerHTML='bb'; 
    y5.innerHTML='cc'; 
    y6.innerHTML=' <input type="button" onclick="modifyVender(this.parentNode.parentNode)"  value="修改" />&nbsp;&nbsp; <input type="button" onclick="delVender(this.parentNode.parentNode)" value="删除" />'; 
    } 
    function set(){ 
    var s=document.getElementById('form1').reset(); 
    } 
    </script> 
    </head> <body> 
    <input type="button" value="新增" onclick="len()"> 
    <div id="Layer1"> 
      <table  id ="mytable" width="835" border="1"> 
        <tr bordercolor="#000000"> 
          <th width="100" height="17">编号 </th> 
          <th width="100">标题 </th> 
          <th width="100">摘要 </th> 
          <th width="100">作者 </th> 
          <th width="100">类别 </th> 
          <th width="100">操作 </th>     </tr> 
      </table> 
      <div id="Layer2" style="display:none"> 
        <form id="form1" name="form1" method="post" action=""> 
          <p>标题： <input name="TEXT" type="TEXT" size="" maxlength="15" />     摘要： <input type="TEXT" size="" maxlength="15"> 
        </p> 
          <p>作者： <input type="TEXT" size="" maxlength="15"> 
      类型： <select id="mySelect" name="mySelect" > 
          <option value="证券">证券 
          <option value="金融">金融 
          <option value="股票" >股票 
          <option value="房地产">房地产 
        </select> 
          </p> 
          <p>&nbsp; <input type="button" value="重置" onclick="set()"> 
      <input type="button" value="添加" onclick="add()"> 
      <input type="button" value="修改"> </p> 
        </form> 
    </div> 
    </body> 
    </html>
      

  2.   

    function add(){ 
    var x=document.getElementById('mytable').insertRow(-1) 
    var y1=x.insertCell(0) 
    var y2=x.insertCell(1) 
    var y3=x.insertCell(2) 
    var y4=x.insertCell(3) 
    var y5=x.insertCell(4) 
    var y6=x.insertCell(5) 
    y1.innerHTML=x.rowIndex.toString(); 
    y2.innerHTML=" <input name='TEXT'/>";//问题在这，form李的内容不会显示在新增的表格里，要怎样改才能把实现呢？ 
    y3.innerHTML='aa'; 
    y4.innerHTML='bb'; 
    y5.innerHTML='cc'; 
    y6.innerHTML=' <input type="button" onclick="modifyVender(this.parentNode.parentNode)"  value="修改" />&nbsp;&nbsp; <input type="button" onclick="delVender(this.parentNode.parentNode)" value="删除" />'; 
    } 不是这样的，我想把form里的内容加到新增的行里，如果直接赋值，就没有必要再立添加一个form了
      

  3.   


    <html> 
    <head> <title>新闻系统 </title> <style type="text/css"> 
    <!-- 
    .新增 {font-size: medium} 
    .STYLE1 {font-size: large} 
    #Layer1 { 
    position:absolute; 
    width:836px; 
    height:282px; 
    z-index:1; 
    left: 15px; 
    top: 42px; 
    } 
    #Layer2 { 
    position:absolute; 
    width:597px; 
    height:115px; 
    z-index:1; 
    left: 21px; 
    top: 117px; 
    } 
    --> 
    </style> 
    <script language="javascript"> function  len(){ 
    document.getElementById("Layer2").style.display="block"; 
    } 
    function add(){ 
    var x=document.getElementById('mytable').insertRow(-1) 
    var y1=x.insertCell(0) 
    var y2=x.insertCell(1) 
    var y3=x.insertCell(2) 
    var y4=x.insertCell(3) 
    var y5=x.insertCell(4) 
    var y6=x.insertCell(5) 
    y1.innerHTML=x.rowIndex.toString(); 
    var oTitle = document.getElementById('title').value;
    var ozy = document.getElementById('zy').value;
    y2.innerHTML=" <input name='TEXT' value="+oTitle+">"; // 其余的都一样
    y3.innerHTML=" <input name='TEXT' value="+ozy+">"; 
    y4.innerHTML='bb'; 
    y5.innerHTML='cc'; 
    y6.innerHTML=' <input type="button" onclick="modifyVender(this.parentNode.parentNode)"  value="修改" />&nbsp;&nbsp; <input type="button" onclick="delVender(this.parentNode.parentNode)" value="删除" />'; 
    } 
    function set(){ 
    var s=document.getElementById('form1').reset(); 
    } 
    </script> 
    </head> <body> 
    <input type="button" value="新增" onclick="len()"> 
    <div id="Layer1"> 
      <table  id ="mytable" width="835" border="1"> 
        <tr bordercolor="#000000"> 
          <th width="100" height="17">编号 </th> 
          <th width="100">标题 </th> 
          <th width="100">摘要 </th> 
          <th width="100">作者 </th> 
          <th width="100">类别 </th> 
          <th width="100">操作 </th>     </tr> 
      </table> 
      <div id="Layer2" style="display:none"> 
        <form id="form1" name="form1" method="post" action=""> 
          <p>标题： <input name="TEXT" id='title' type="TEXT" size="" maxlength="15" />     摘要： <input type="TEXT" id="zy" size="" maxlength="15"> 
        </p> 
          <p>作者： <input type="TEXT" size="" maxlength="15"> 
      类型： <select id="mySelect" name="mySelect" > 
          <option value="证券">证券 
          <option value="金融">金融 
          <option value="股票" >股票 
          <option value="房地产">房地产 
        </select> 
          </p> 
          <p>&nbsp; <input type="button" value="重置" onclick="set()"> 
      <input type="button" value="添加" onclick="add()"> 
      <input type="button" value="修改"> </p> 
        </form> 
    </div> 
    </body> 
    </html>