如何通过JS增加行？如何通过JS增加行？如何通过JS增加行？

<table id="mytab"> 
<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>
通过JS如何变成
<table id="mytab"> 
<tr><td colSpan="3" align="center">员工表</td></tr>   //新增的行
<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> 
---
<tr><td>合计</td><td>10人</td></tr>        //新增的行
</table>

解决方案 »

  1.   


    var table = document.getElementById('mytab');
    var tr = table.insertRow(-1);
    var td = tr.insertCell(-1);
    td.innerHTML = '<合计>';
    td = tr.insertCell(-1);
    td.innerHTML = '10人';
      

  2.   

    用DOM方式创建，效率比inertRow高许多。
      

  3.   

    javascript 对表格的操作
      

  4.   

    var tr=tb.insertRow(5);
    var cl=tr.insertCells(5);
    cl.innerHtml();
    或者直接CloneNode()
    tr.Cells[0].fristChild.value=newtr.rowIndex
      

  5.   


    <html>
    <head>
    <title>添加行</title>
    <script type="text/javascript">
    function addRow(tb)
    {
    var tb=document.getElementById(tb); var tr=document.createElement("tr");
    var td=document.createElement("td");
            txtNode = document.createTextNode("员工表");
    td.setAttribute("colspan","3");
    td.setAttribute("align","center");

    td.appendChild(txtNode);
    tr.appendChild(td);
    tb.childNodes[1].insertBefore(tr,tb.childNodes[1].childNodes[0]);
    }
    </script>
    </head>
    <body>
    <table id="mytab" style="width:100px"> 
    <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>
      

  6.   


    <html>
    <head>
    <title>添加行</title>
    <script type="text/javascript">
    function addRow(tb)
    {
    var tb=document.getElementById(tb);
    var tbody = tb.childNodes[1];
    //插入行
    tbody.insertRow(0);
    //插入列
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].setAttribute("align","center");
    tbody.rows[0].cells[0].setAttribute("colspan","2");
    tbody.rows[0].cells[0].appendChild(document.createTextNode("员工表"));
    }
    </script>
    </head>
    <body>
    <table id="mytab" style="width:100px"> 
    <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>
      

  7.   

    表格的操作会比较复杂,表格不支持用 innerHTML 的方式建表格子项,,,用JQuery这个插件吧..会很省心..
      

  8.   

    <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>