数据表隐藏显示条目 - Javascript (1)

📌 相关文章

📜 数据表隐藏显示条目 - Javascript (1)

📅 最后修改于: 2023-12-03 15:10:20.883000 🧑 作者: Mango

数据表隐藏显示条目 - Javascript

在网页开发中，经常需要展示一张数据表，但如果全部显示出来，内容过于繁杂，会让用户感到混乱。因此我们可以使用Javascript编写代码，实现数据表中的条目的隐藏和显示。

实现思路

我们可以利用table中的tr标签来实现。为每个tr标签加上一个class，再利用Javascript来动态地修改class名，从而实现隐藏和显示的效果。

实现步骤

给需要隐藏的tr标签添加一个class名，例如"hide"。

<tr class="hide">
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
</tr>

编写Javascript代码，实现隐藏和显示功能。例如，我们可以通过点击按钮来切换所有带有"hide"的tr元素的class名。

//获取按钮和所有带有hide类名的tr标签
var btn = document.getElementById("toggleBtn");
var trs = document.querySelectorAll(".hide");

btn.addEventListener("click", function(){
    //遍历所有hide类名的tr元素并修改它们的class名
    for(var i = 0; i < trs.length; i++){
        if(trs[i].classList.contains("hide")){
            trs[i].classList.remove("hide");
        }else{
            trs[i].classList.add("hide");
        }
    }
});

在页面中添加一个按钮，并调用Javascript代码。

<button id="toggleBtn">Toggle</button>

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据表隐藏显示条目</title>
</head>
<body>
    <table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr class="hide">
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr class="hide">
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
    </table>
    <button id="toggleBtn">Toggle</button>
    <script>
        var btn = document.getElementById("toggleBtn");
        var trs = document.querySelectorAll(".hide");

        btn.addEventListener("click", function(){
            for(var i = 0; i < trs.length; i++){
                if(trs[i].classList.contains("hide")){
                    trs[i].classList.remove("hide");
                }else{
                    trs[i].classList.add("hide");
                }
            }
        });
    </script>
</body>
</html>

以上就是用Javascript实现数据表隐藏和显示条目的方法，希望对您有所帮助。