用DOM的形式创建表，为什么不行啊？请指教

function start() {
//获取body标签
var mybody = document.getElementsByTagName("body")[0];
 
// 创建一个<table>元素和一个<tbody>元素
mytable     = document.createElement("table");
mytablebody = document.createElement("tbody");
 
//创建所有的单元格
for(var j = 0; j < 2; j++) {
    // 创建一个<tr>元素
    mycurrent_row = document.createElement("tr");
    for(var i = 0; i < 2; i++) {
    // 创建一个<td>元素
    mycurrent_cell = document.createElement("td");
    //创建一个文本节点
    currenttext = document.createTextNode("单元格是第"+j+"行，第"+i+"列");
    // 将创建的文本节点添加到<td>里
    mycurrent_cell.appendChild(currenttext);
    // 将列<td>添加到行<tr>
    mycurrent_row.appendChild(mycurrent_cell);
    }
    // 将行<tr>添加到<tbody>
    mytablebody.appendChild(mycurrent_row);
}
// 将<tbody>添加到<table>
mytable.appendChild(mytablebody);
//将<table>添加到<body>
mybody.appendChild(mytable);
// 将表格mytable的border属性设置为2
mytable.setAttribute("border", "1");
}

解决方案 »

  1.   

    恩，可以运行。是不是要创建document.createElement("tbody");这个才行啊。呵呵，不过还是给分。
      

  2.   

    <!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 addRow()
    {
    var t1=document.getElementById("t1");var divObj = document.createElement("div");
    var row1 = document.createElement("TR");
    row1.height = 110;
    var col1=document.createElement("TD");
    col1.innerText = "1212";
    var col2=document.createElement("TD");
    col2.innerText ="1212";
    var tbody=document.createElement("tbody");
    row1.appendChild(col1);
    row1.appendChild(col2);
    //divObj.appendChild(fileObj);
    tbody.appendChild(row1);
    t1.appendChild(tbody);}</script>
    </HEAD><BODY>
    <table id='t1' width="850" border="1" cellspacing="0" cellpadding="0">
    <tr id=>
    <td id="d1">&nbsp;</td>
    <td>&nbsp;</td>
    </tr></table>
    <input value="添加行" name="addBtn" type="button" onClick='addRow()'> 
    </BODY>
    </HTML>
      

  3.   

    //<script>
    //************************************** select desc/image   start
       function selectDesc(){
      var table = document.getElementById("Table_Desc_Image");
      var rows = table.getElementsByTagName("tr");
    //************************* delete old
      if (table.rows.length > 0){
       var row = rows[0];
       var Kids = row.childNodes;
       var c = row.removeChild(Kids[0]); 
       if ( Kids.length  ==  0 ){
                 table.tBodies[0].removeChild(row);
       }
      }
    //************************* add new
      var row = document.createElement("tr");
      var col = document.createElement("td");
      var txt_area =document.createElement("<textarea name='Description' rows='20' cols='60'></textarea>");
      col.appendChild(txt_area);
      row.appendChild(col);
      table.tBodies[0].appendChild(row);
       }
       function selectImage(){  
      var table = document.getElementById("Table_Desc_Image");
      var rows = table.getElementsByTagName("tr");
    //************************* delete old
      if (table.rows.length > 0){
       var row = rows[0];
       var Kids = row.childNodes;
       var c = row.removeChild(Kids[0]); 
       if ( Kids.length  ==  0 ){
                 table.tBodies[0].removeChild(row);
       }
      }
    //************************* add new
      var row = document.createElement("tr");
      var col = document.createElement("td");
      var fileURL =document.createElement("<INPUT TYPE='file' NAME='strURL' SIZE='30'>");
      col.appendChild(fileURL);
      row.appendChild(col);
      table.tBodies[0].appendChild(row);
       }
    //************************************** select desc/image   end
    //jsp
       <tbody>
       <table id="Table_Desc_Image">
        <tr>
         <td>
          <textarea name='Description' rows="20" cols="60"></textarea>     
         </td>
        </tr>
       </table>
       </tbody>
      

  4.   

    to xiaolei1982:
    你在3楼发的贴我看懂了，但是你4楼的代码是干什么的呢？
    现在我想删除表的内容，但是不删除表头，那该怎么做呢？谢谢。
    比如表的格式如下：
    <table id="test" cellpadding="1" cellspacing="0" border="1" width="90%">
    <tr>
    <td>编号</td><td>索引</td><td>开始日期</td><td>内容</td> 
    </tr>
    </table> 
      

  5.   

    呵呵我是留做记号的帖子，贴了点无关的内容
    你可以这样操作：
    getElementById("test").inner<SCRIPT LANGUAGE="JavaScript">
    function aaa(){
    obj=document.getElementById("test");
    方法1：
    obj.outerHTML="<table   id=\'test\'   cellpadding=1  cellspacing=0   border=1   width=90%><tr><td> 编号 </td> <td> 索引 </td> <td> 开始日期 </td> <td> 内容 </td>  </tr></table>";
    方法2：
    for(i=0;i<obj.childNodes.length-1;i++){
    obj.removeChild(obj.childNodes[1])
    }
    }
    </script>
      

  6.   

    是不是 document.createElement(...) 中 要添入闭合标签啊  例如创建一个层 document.createElement("<div></div>")这样应该比document.createElement("<div>") 更不容易出问题。