如何用JavaScript隐藏或显示某些表格行

在网页开发中，表格是常用的展示数据的方式。有时我们需要根据某些条件动态地隐藏或显示表格的行。本文将通过一个具体的示例来介绍如何用JavaScript实现这一功能。

需求分析

假设我们有一个包含多个学生信息的表格，用户可以根据学年的不同选择性地显示该学年的数据。我们将建一个简单的页面，其中包括一个表格和几个按钮，用户可以通过点击按钮来隐藏或显示特定的表格行。

HTML 结构

首先，我们需要构建一个简单的 HTML 页面来展示我们的表格。在这个表格中，我们将显示学生的姓名和所在学年。以下是基本的 HTML 结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格行隐藏与显示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    学生信息表
    
    <div>
        <button onclick="showYear('2022')">显示2022年学生</button>
        <button onclick="showYear('2023')">显示2023年学生</button>
        <button onclick="showAll()">显示所有学生</button>
    </div>

    <table id="studentTable" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学年</th>
            </tr>
        </thead>
        <tbody>
            <tr data-year="2022">
                <td>张三</td>
                <td>2022</td>
            </tr>
            <tr data-year="2023">
                <td>李四</td>
                <td>2023</td>
            </tr>
            <tr data-year="2022">
                <td>王五</td>
                <td>2022</td>
            </tr>
            <tr data-year="2023">
                <td>赵六</td>
                <td>2023</td>
            </tr>
        </tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

CSS 样式

为表格添加一些简单的样式，使其更加美观，您可以在 styles.css 文件中添加以下代码：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr.hidden {
    display: none;
}

JavaScript 实现

在我们的 script.js 文件中，我们将实现按钮的点击事件处理。这些事件将负责隐藏或显示表格中的行。以下是具体的代码实现：

function showYear(year) {
    const rows = document.querySelectorAll('#studentTable tbody tr');

    rows.forEach(row => {
        if (row.getAttribute('data-year') === year) {
            row.classList.remove('hidden');
        } else {
            row.classList.add('hidden');
        }
    });
}

function showAll() {
    const rows = document.querySelectorAll('#studentTable tbody tr');
    
    rows.forEach(row => {
        row.classList.remove('hidden');
    });
}

代码解析

  1. showYear(year) 函数：当用户点击某一年的按钮时，该函数会检查每一行的 data-year 属性。如果该行的属性等于用户选择的年份，它将显示该行；否则，隐藏该行。

  2. showAll() 函数：该函数在用户点击“显示所有学生”按钮时被调用，所有行都将被显示。

整体效果展示

通过上述步骤，我们创建了一个能动态显示和隐藏表格行的简单网页。用户可以通过按钮来筛选信息，便于更快地获取所需的内容。

以下是数据的饼状图表示（使用 Mermaid 语法）：

pie
    title 学年分布
    "2022年": 2
    "2023年": 2

总结

本文详细介绍了如何使用 JavaScript 控制表格行的显示和隐藏，包括了完整的 HTML、CSS 和 JavaScript 代码示例。通过简单的按钮，用户可以更方便地查看特定年份的学生数据。这种动态显示的功能在现代网页应用中非常常见，可以有效提升用户体验。

希望您能够将本文中的代码灵活应用到自己的项目中，提升表格的交互性和可读性。如果您有任何疑问，欢迎随时提出！