js 创建表格

怎么用js创建一个表格，表格中不同的行的列数不同，比如第一行只有一列，第二行三列。

解决方案 »

  1.   


    <style>
    table {
    width: 200px;
    border: 1px solid #C9C9C9;
    border-collapse: collapse;
    text-align:center;
    }
    td {
    height: 35px;
    border: 1px solid #C9C9C9;
    }
    </style>
    <body>
    <script type="text/javascript">
    <!--
    (function(){
    var otbl = document.createElement('table');
    // FirstRow
    var row0 = otbl.insertRow(0);
    var cell0 = row0.insertCell(0);
    cell0.colSpan = "3";
    cell0.innerHTML = "First";
    // SecondRow
    var row1 = otbl.insertRow(1);
    row1.insertCell(0).innerHTML = "First";
    row1.insertCell(1).innerHTML = "Second";
    row1.insertCell(2).innerHTML = "Third";
    document.body.appendChild(otbl);
    })();//-->
    </script>
    </body>
      

  2.   

    你好，下面的代码能帮我改改么
    一行中有一列也有两列的，我写的怎么就不好使呢
      tr = document.createElement( 'tr' ); 
        tr.style.align='middle'; 
        td = document.createElement( 'td' ); 
        td.width = '90'; 
        cb = document.createElement( 'input' ); 
                cb.type = 'text'; 
                cb.width='90'; 
                cb.id='t2'; 
                cb.name = 'yj'; 
                cb.value=''; 
                td.appendChild( cb ); 
        tr.appendChild( td ); 
        tb.appendChild(tr);     tr = document.createElement( 'tr' ); 
        td = document.createElement( 'td' ); 
        td.width = '90'; 
        cb = document.createElement( 'input' ); 
                cb.type = 'text'; 
                cb.width='90'; 
                cb.name = 'zw'; 
                cb.value = ''; 
                td.appendChild( cb ); 
        tr.appendChild( td ); 
        td = document.createElement( 'td' ); 
        td.width = '90'; 
        cb = document.createElement( 'input' ); 
                cb.type = 'text'; 
                cb.width='90'; 
                cb.name = 'yw'; 
                cb.value = ''; 
                td.appendChild( cb ); 
        tr.appendChild( td ); 
            td = document.createElement( 'td' ); 
            td.setAttribute('width','34px'); 
            tr.appendChild( td ); 
        tb.appendChild(tr); 
      

  3.   


    <html> 
    <head> 
    <title> </title> 
    <script type="text/javascript"> 
    function $(elem) 
    { 
    return document.getElementById(elem); 
    } 
    var num=1; 
    function addd() 
    { 
    var tab=$("tb"); 
    var row=tab.insertRow(-1); 
    row.id="row"+num; 
    var cell1=row.insertCell(-1); 
    var cell2=row.insertCell(-1); 
    var cell3=row.insertCell(-1); 
    var cell4=row.insertCell(-1); 
    var cell5=row.insertCell(-1); 
    var cell6=row.insertCell(-1); 
    cell1.innerHTML="<select name='xxx'></select>"; 
    cell2.innerHTML="<input  type='radio'  value='sex' name='sex'>";
    cell3.innerHTML=" <input type='text'>"; 
    cell4.innerHTML=" <input type='text'>"; 
    cell5.innerHTML=" <input type='text'>"; 
    cell6.innerHTML=" <input type='button' onclick='del("+num+")' value='delete' >"; 
    num++; }
    function del(num) 
    { 
      
        var row=$("row"+num); 
        var tab=$("tb");    
        tab.deleteRow(row.rowIndex); 
        
    } 
    </script> 
    </head> 
    <body> 
    <table id="tb" border=1> 
    </table> 
        <input type="button" value="add" id="ok" onclick="addd();"/> 
    </body> 
    </html>