JavaScript 如何删除表格中的行

在本文中，我们将看到如何使用JavaScript从表格中删除行。有两种方法可以实现：

JavaScript remove() 方法
使用 deleteRow() 方法

remove()方法用于使用JavaScript从HTML表格中删除表格行。

JavaScript remove() 方法

此方法除了删除选定元素的文本和子节点外，还会删除选定元素的数据和事件。

语法：

node.remove()

示例 1： 此示例首先通过 id 值 选择行，然后使用 remove() 方法 将其移除。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to remove the table row 
        in a table using JavaScript ?
    </title>
 
    <style>
        table {
            margin: auto;
        }
        table, th, tr, td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Remove Table Row from a Table
    </h3>
 
    <table>
        <tr>
            <th>S.No</th>
            <th>Title</th>
            <th>Geek_id</th>
        </tr>
        <tr id="row1">
            <td>Geek_1</td>
            <td>GeekForGeeks</td>
            <th>Geek_id_1</th>
        </tr>
        <tr>
            <td>Geek_2</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_2</th>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click Here
    </button>
 
    <script>
        function Geeks() {
            document.getElementById("row1").remove();
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何删除表格中的行

示例2： 这个示例首先通过使用 标签名称 选择行，然后使用 remove()方法 按索引删除相应的元素。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to remove the table row 
        in a table using JavaScript ?
    </title>
 
    <style>
        table {
            margin: auto;
        }
        table, th, tr, td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Remove Table row from a Table
    </h3>
     
    <table>
        <tr>
            <th>S.No</th>
            <th>Title</th>
            <th>Geek_id</th>
        </tr>
        <tr id="row1">
            <td>Geek_1</td>
            <td>GeekForGeeks</td>
            <th>Geek_id_1</th>
        </tr>
        <tr>
            <td>Geek_2</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_2</th>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click Here
    </button>
 
    <script>
        function Geeks() {
            document.getElementsByTagName("tr")[2].remove();
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何删除表格中的行

使用DOM deleteRow() 方法

此方法用于从表格中删除元素。

语法：

tableObject.deleteRow(index)

示例： 在这个示例中，我们将看到deleteRow()方法的使用。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to remove the table row 
        in a table using JavaScript ?
    </title>
 
    <style>
        table {
            margin: auto;
        }
        table, th, tr, td {
            border: 1px solid black;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Remove Table row from a Table
    </h3>
     
    <table id="newtable">
        <tr>
            <th>S.No</th>
            <th>Title</th>
            <th>Geek_id</th>
        </tr>
        <tr>
            <td>Geek_1</td>
            <td>GeekForGeeks</td>
            <th>Geek_id_1</th>
        </tr>
        <tr>
            <td>Geek_2</td>
            <td>GeeksForGeeks</td>
            <th>Geek_id_2</th>
        </tr>
    </table>
    <br>
 
    <button onclick="document.getElementById(
            'newtable').deleteRow(1)">
        Click Here
    </button>
</body>
 
</html>