【Java 进阶篇】JavaScript 表格全选案例详解

news2024/11/19 14:53:10

在这里插入图片描述

在网页开发中，表格（Table）是一种常用的HTML元素，用于以表格形式展示数据。对于包含大量数据的表格，提供一个全选复选框可以极大地提高用户体验，方便用户一次性选择或取消选择所有项目。本篇博客将详细介绍如何使用JavaScript创建一个表格全选功能，适用于面向基础小白的读者。我们将从基础的HTML和CSS开始，然后逐步添加JavaScript代码，创建一个交互性强的表格。

HTML 结构

首先，我们需要创建一个基本的HTML结构，包括一个表格和一个全选复选框。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格全选示例</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h2>示例表格</h2>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"> 全选</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="checkbox"></td>
                <td>小明</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkbox"></td>
                <td>小红</td>
                <td>28</td>
                <td>上海</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkbox"></td>
                <td>小刚</td>
                <td>22</td>
                <td>广州</td>
            </tr>
        </tbody>
    </table>
    <script>
        // JavaScript 代码将在下面添加
    </script>
</body>
</html>

上述HTML代码创建了一个包含表头和表格数据的简单表格。我们添加了一个全选复选框（id 为 selectAll），以及每一行的复选框（class 为 checkbox）。

JavaScript 代码

接下来，我们将添加JavaScript代码，以便使全选复选框能够选择或取消选择所有项目，同时根据所选项目更新全选复选框的状态。以下是JavaScript代码的详细解释：

<script>
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.checkbox');
    
    // 为全选复选框添加点击事件监听器
    selectAll.addEventListener('click', function () {
        for (const checkbox of checkboxes) {
            checkbox.checked = selectAll.checked;
        }
    });
    
    // 为每个项目的复选框添加点击事件监听器
    for (const checkbox of checkboxes) {
        checkbox.addEventListener('click', function () {
            const allChecked = [...checkboxes].every(checkbox => checkbox.checked);
            selectAll.checked = allChecked;
        });
    }
</script>

让我们详细解释一下这段JavaScript代码：

我们首先获取全选复选框和所有项目的复选框，分别保存在 selectAll 和 checkboxes 变量中。
然后，我们为全选复选框添加一个点击事件监听器。当用户点击全选复选框时，我们使用一个 for...of 循环遍历所有项目的复选框，将它们的 checked 属性设置为全选复选框的状态（selectAll.checked），从而实现一键全选或取消全选的功能。
接下来，我们为每个项目的复选框添加点击事件监听器。当用户点击某个项目的复选框时，我们使用 every 方法检查是否所有项目的复选框都被选中。如果是的话，我们将全选复选框的状态设为选中，否则设为未选中。