删除表格的行或单元格

浅浅的花香味﹌ 2022-05-12 00:42 266阅读 0赞

**一 介绍**

删除表格的指定表格行使用HTMLTableElement对象的如下方法：deleteRow

删除表格行的指定单元格使用HTMLRowElement对象的如下方法：deleteCell

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)"/>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>删除表格的行和格</title>
    </head>
    <body>
    <input id="delrow" type="button" value="删除表格最后一行"
     οnclick="delrow();"/><br />
    <input id="delcell" type="button" value="删除最后一行的最后一格"
     οnclick="delcell();"/><br />
    <table id="test" border="1" style="width:400px;">
    <caption>疯狂Java体系</caption>
    <tr>
    <td>疯狂Java讲义</td>
    <td>轻量级Java EE企业应用实战</td>
    </tr>
    <tr>
    <td>疯狂Ajax讲义</td>
    <td>经典Java EE企业应用实战</td>
    </tr>
    <tr>
    <td>疯狂XML讲义</td>
    <td>疯狂Android讲义</td>
    </tr>
    </table>
    <script type="text/javascript">
    // 获取目标表格
    var tab = document.getElementById("test");
    // 删除行的函数
    var delrow =function()
    {
    if(tab.rows.length >0)
    {
    // 删除最后一行
     tab.deleteRow(tab.rows.length -1);
    }
    }
    // 删除目标表格的最后一格
    var delcell =function()
    {
    // 获取表格的所有行
    var rowList = tab.rows;
    // 获取表格的最后一行
    var lastRow = rowList.item(rowList.length -1);
    if(lastRow.cells.length >0)
    {
    // 删除表格的最后一格
     lastRow.deleteCell(lastRow.cells.length -1);
    }
    }
    </script>
    </body>
    </html>

** **

**三 运行结果**

![49a77fcd-8b2c-340e-bef8-ebbc8bab9f84.png][]

[49a77fcd-8b2c-340e-bef8-ebbc8bab9f84.png]: /images/20220512/924914347002494c80759b46f5cb1673.png