JavaScript 如何隐藏表头

在本文中，我们将看到使用JavaScript隐藏表头的方法。有两种方法可以通过JavaScript帮助隐藏表头。

以下是它们的讨论：

使用style和display属性
使用jQuery hide方法

方法1： 使用CSS选择器选择表头，并修改 style 属性，使 display 属性的值设置为 none 。这将从页面中隐藏所选的表头元素。

示例： 此示例演示了上述方法的使用。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to hide the table header
        using JavaScript ?
    </title>
 
    <style>
        table, tr th, td {
            border: 1px solid black;
        }
 
        th, td {
            padding: 10px;
        }
 
        table {
            margin: auto;
        }
    </style>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <table id="table">
        <tr id="thead">
            <th>S.No</th>
            <th>Title</th>
        </tr>
        <tr>
            <td>Geek_1</td>
            <td>GeekForGeeks</td>
        </tr>
        <tr>
            <td>Geek_2</td>
            <td>GeeksForGeeks</td>
        </tr>
        <tr>
            <td>Geek_3</td>
            <td>GeeksForGeeks</td>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click Here
    </button>
     
    <p id="GFG"></p>
 
    <script>
        var elm = document.getElementById("GFG");
 
        function Geeks() {
            let tableHead = document.getElementById("thead");
            tableHead.style.display = "none";
            elm.innerHTML = "Table header is hidden";
        } 
    </script>
</body>
 
</html>

输出：

JavaScript 如何隐藏表头

方式2： 使用 jQuery 选择需要隐藏的标题，并使用 hide() 方法隐藏它。该方法可以将其应用到要隐藏的元素上。

示例： 此示例演示了上述方法的使用。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to hide the table header
        using JavaScript ?
    </title>
 
    <style>
        table,
        tr th,
        td {
            border: 1px solid black;
        }
 
        th,
        td {
            padding: 10px;
        }
 
        table {
            margin: auto;
        }
    </style>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <table id="table">
        <tr id="thead">
            <th>S.No</th>
            <th>Title</th>
        </tr>
        <tr>
            <td>Geek_1</td>
            <td>GeekForGeeks</td>
        </tr>
        <tr>
            <td>Geek_2</td>
            <td>GeeksForGeeks</td>
        </tr>
        <tr>
            <td>Geek_3</td>
            <td>GeeksForGeeks</td>
        </tr>
    </table>
    <br>
 
    <button onclick="Geeks()">
        Click Here
    </button>
 
    <p id="GFG"></p>
 
    <script>
        var elm = document.getElementById("GFG");
 
        function Geeks() {
            $("#thead").hide();
            elm.innerHTML = "Table header is hidden";
        } 
    </script>
</body>
 
</html>

输出:

JavaScript 如何隐藏表头