js 添加 表格

<html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow(tb)
{
    var tb=document.getElementById(tb);
    var tbody = tb.childNodes[0];
    //插入行
var len = tbody.rows.length;
    tbody.insertRow(len);
    //插入列
    tbody.rows[len].insertCell(0);
    tbody.rows[len].cells[0].appendChild(document.createTextNode("csdn")); tbody.rows[len].insertCell(1);
    tbody.rows[len].cells[1].setAttribute("align","center");
    tbody.rows[len].cells[1].appendChild(document.createTextNode("员工表"));
}
</script>    
</head>
<body>
<table id="mytab" style="width:100px" border="1"> 
<tr> <td>编号 </td> <td>姓名 </td> </tr> 
<tr> <td>1 </td> <td>小王 </td> </tr> 
<tr> <td>2 </td> <td>小明 </td> </tr> 
<tr> <td>3 </td> <td>小如 </td> </tr> 
<tr> <td>4 </td> <td>小陈 </td> </tr> 
<tr> <td>5 </td> <td>小赵 </td> </tr> 
<tr> <td>6 </td> <td>小刘 </td> </tr> 
<tr> <td>7 </td> <td>小王 </td> </tr> 
<tr> <td>8 </td> <td>小明 </td> </tr> 
<tr> <td>9 </td> <td>小如 </td> </tr> 
<tr> <td>10 </td> <td>小陈 </td> </tr> 
</table> 
<input type="button" name="btnAddRow" onclick="addRow('mytab')" value="添加行"/>
</body>
</html>

解决方案 »

  1.   

    下次请记得提问。不然谁知道你要干嘛~~
    <html>
    <head>
    <title> 添加行 </title>
    <script   type= "text/javascript ">
    function   addRow(tb)
    {
            var   tb=document.getElementById(tb);
            var   tbody   =   tb.childNodes[0];
            //插入行
    var   len   =   tbody.rows.length;
            tbody.insertRow(len);
            //插入列
            tbody.rows[len].insertCell(0);
            tbody.rows[len].cells[0].appendChild(document.createTextNode( "csdn ")); tbody.rows[len].insertCell(1);
            tbody.rows[len].cells[1].setAttribute( "align", "center");
            tbody.rows[len].cells[1].appendChild(document.createTextNode( "员工表 "));
    }
    </script>        
    </head>
    <body>
    <table   id= "mytab "   style= "width:100px "   border= "1 "><tbody>  
    <tr>   <td> 编号   </td>   <td> 姓名   </td>   </tr>  
    <tr>   <td> 1   </td>   <td> 小王   </td>   </tr>  
    <tr>   <td> 2   </td>   <td> 小明   </td>   </tr>  
    <tr>   <td> 3   </td>   <td> 小如   </td>   </tr>  
    <tr>   <td> 4   </td>   <td> 小陈   </td>   </tr>  
    <tr>   <td> 5   </td>   <td> 小赵   </td>   </tr>  
    <tr>   <td> 6   </td>   <td> 小刘   </td>   </tr>  
    <tr>   <td> 7   </td>   <td> 小王   </td>   </tr>  
    <tr>   <td> 8   </td>   <td> 小明   </td>   </tr>  
    <tr>   <td> 9   </td>   <td> 小如   </td>   </tr>  
    <tr>   <td> 10   </td>   <td> 小陈   </td>   </tr>  </tbody>
    </table>  
    <input   type= "button "   name= "btnAddRow "   onclick= "addRow( 'mytab ') "   value= "添加行 "/>
    </body>
    </html> 
      

  2.   

    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
    <tbody>
    <tr>
    <td>0</td>
    <td>a</td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="add" onclick="addRow('tab')" />
    <script type="text/javascript">
    <!--
    function addRow(obj){
    var tb=document.getElementById(obj);
    var bd=tb.tBodies[0];
    var len=bd.rows.length;
    var row=bd.insertRow(len);
    var tx=rows[0].cells[1].TextNode.char();
    row.insertCell(0);
    row.cells[0].appendChild(document.createTextNode(len));
    row.insertCell(1);
    row.cells[1].appendChild(document.createTextNode('b'));
    }
    //-->
    </script>
    这种效果？
      

  3.   

    <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
    <tbody>
    <tr>
    <td>0</td>
    <td>a</td>
    </tr>
    </tbody>
    </table>
    <input type="button" value="add" onclick="addRow('tab')" />
    <script type="text/javascript">
    <!--
    function addRow(obj){
    var tb=document.getElementById(obj);
    var bd=tb.tBodies[0];
    var len=bd.rows.length;
    var row=bd.insertRow(len);
    row.insertCell(0);
    row.cells[0].appendChild(document.createTextNode(len));
    row.insertCell(1);
    row.cells[1].appendChild(document.createTextNode('b'));
    }
    //-->
    </script>