请教使用JS脚本创建表格的问题

最近看到了一个面试的题目，题目是这样的，一个表格，5行6列，第一个格里面是1，第二个是2，最后一个是30，要求使用JS脚本来创建这个表格，我对JS脚本还停留在使用ALTER弹出个对话框的阶段，这个题目对我来说太难了，希望各位高手能指点一二，最好能有程序和注释的，谢谢各位了

解决方案 »

  1.   

    var table = document.getElementById(table_id);
    for(i=1;i<=5;i++) //行
    {
      var row = table.insertRow(-1);
      for(j=0;j<6;j++) //列
      {
        var cell = row.insertCell(j);
        cell.innerHTML = 6 * (i - 1) + j + 1;
      }
    }
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <script type="text/javascript">
      <!--
    function createTable(){
    var arr = [
    [1,2,3,4,5]
       ,[6,7,8,9,10]
       ,[11,12,13,14,15]
       ,[16,17,18,19,20]
       ,[21,22,23,24,25]
       ,[26,27,28,29,30]
    ]
    var otr,otd;
    var otbl = document.createElement("table");
    otbl.border="1px solid #99CCCC";
    otbl.width = "300px"
    var oTbody = document.createElement("tbody");
    otbl.appendChild(oTbody);
    for(var i = 0;i < arr.length;i++){
    oTbody.insertRow(i);
    for(var j = 0;j < arr[i].length;j++){
    oTbody.rows[i].insertCell(j);
    oTbody.rows[i].cells[j].innerHTML = arr[i][j];
    }
    } document.body.appendChild(otbl)
    }
      //-->
      </script>
     </head> <body>
      <input type="button" value="生成表格" onclick="createTable()"/>
     </body>
    </html>
      

  3.   


    <html><head><script language="javascript">function makeTable() {       var table = document.createElement("table");

           // 加上表的属性
           table.setAttribute("border","1");       table.setAttribute("width","600");       table.setAttribute("class","tab-content");       // 将 table 添加到 document 中
           document.body.appendChild(table);       table.createCaption().appendChild(document.createTextNode("js 生成table 标题栏"));       var header = table.createTHead();       var headerrow = header.insertRow(0);

           for(var i=6;i>0;i--){
                // 因为表头是从右至左生成，所以倒序生成表头
                headerrow.insertCell(0).appendChild(document.createTextNode("表头 "+i));
           }      
           for(var j=0;j<5;j++){   var row = table.insertRow(j+1);          for(var i=0;i<6;i++) {
                  if(j==0 && i==0){
                     // 第一个格子显示 2
     row.insertCell(i).appendChild(document.createTextNode("2"));
                  }else if(j==4 && i==5){
                     // 最后一个格子显示 30
                    row.insertCell(i).appendChild(document.createTextNode("30"));
                  }else{
    // 其他显示
                    row.insertCell(i).appendChild(document.createTextNode("abc"));
                  }
              }
           }}</script></head>
    <body onLoad="makeTable()">
    </body>
    </html>
      

  4.   


    <div id="table">hello</div>
    <script>
    var container = document.getElementById("table");
    alert(container);
    var tb = document.createElement('TABLE');
    container.appendChild(tb);
    var tbody = document.createElement("TBODY"); 
    var num = 1;
    for(var i=0;i<5; i++){
    var row = document.createElement("TR");
    for(var j=0;j<6;j++){
    var td = document.createElement("TD");
    var txt = document.createTextNode(num++);
    //alert(txt);
    td.appendChild(txt);
    row.appendChild(td);
    }
    tbody.appendChild(row);
    }
    tb.appendChild(tbody);

    </script>