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

在这里插入图片描述

在网页开发中，表格（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 方法检查是否所有项目的复选框都被选中。如果是的话，我们将全选复选框的状态设为选中，否则设为未选中。