在前端开发中，表格是展示结构化数据的常用组件，很多时候我们需要根据用户的选择动态调整表格内容的显示范围，基于复选框状态动态隐藏表格行就是典型的应用场景。这种交互方式可以让用户快速筛选需要查看的内容，减少无关信息的干扰。
实现原理说明
整个功能的实现核心分为三个部分：首先通过DOM API获取页面中的复选框元素和表格行元素，然后给复选框绑定状态变化事件，最后在事件触发时根据复选框的选中状态，修改对应表格行的display样式属性来控制显示或隐藏。
核心DOM操作API
document.querySelectorAll()：用于批量获取符合选择器的元素集合addEventListener()：给元素绑定事件监听函数element.style.display：控制元素的显示状态，设置为none时元素隐藏，设置为空字符串时恢复默认显示
完整实现步骤
1. 构建基础HTML结构
首先我们需要准备一个包含复选框和表格的基础页面结构，复选框用于控制表格行的显示状态，表格的每一行对应一个数据项。
<!DOCTYPE html>
<html lang="zh-CN">
<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 #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.filter-area {
width: 80%;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="filter-area">
<label>
<input type="checkbox" class="status-filter" value="active" checked> 显示启用状态
</label>
<label>
<input type="checkbox" class="status-filter" value="inactive" checked> 显示停用状态
</label>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr data-status="active">
<td>1</td>
<td>商品A</td>
<td>启用</td>
</tr>
<tr data-status="inactive">
<td>2</td>
<td>商品B</td>
<td>停用</td>
</tr>
<tr data-status="active">
<td>3</td>
<td>商品C</td>
<td>启用</td>
</tr>
<tr data-status="inactive">
<td>4</td>
<td>商品D</td>
<td>停用</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
2. 编写JavaScript逻辑代码
接下来我们编写核心的JavaScript代码，实现复选框状态变化时动态隐藏或显示对应的表格行。
// 获取所有状态筛选复选框
const filterCheckboxes = document.querySelectorAll('.status-filter');
// 获取表格所有数据行
const tableRows = document.querySelectorAll('tbody tr');
// 定义处理表格行显示隐藏的函数
function handleRowDisplay() {
// 先获取所有选中的复选框对应的状态值
const checkedStatuses = Array.from(filterCheckboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value);
// 遍历所有表格行，根据状态判断是否显示
tableRows.forEach(row => {
// 获取当前行的状态属性值
const rowStatus = row.getAttribute('data-status');
// 如果当前行的状态在选中的状态列表中，显示该行，否则隐藏
if (checkedStatuses.includes(rowStatus)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
// 给每个复选框绑定change事件
filterCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', handleRowDisplay);
});
// 页面加载完成后先执行一次，初始化显示状态
window.addEventListener('DOMContentLoaded', handleRowDisplay);
代码逻辑解析
上述代码中，我们首先通过querySelectorAll获取了所有的筛选复选框和表格数据行，避免后续重复查询DOM。然后定义了handleRowDisplay函数作为核心处理逻辑：
该函数会先收集所有处于选中状态的复选框对应的状态值，再遍历每一行表格数据，读取行上自定义的data-status属性，判断该状态是否在选中的状态列表中，从而决定行的显示或隐藏。给每个复选框绑定change事件后，只要用户切换复选框的选中状态，就会触发handleRowDisplay函数重新计算所有行的显示状态。最后在页面DOM加载完成后执行一次该函数，保证初始显示状态和复选框的默认选中状态一致。
注意事项
- 表格行的自定义属性
data-status需要和复选框的value值对应，否则无法正确匹配 - 如果表格数据是动态加载的，需要在数据渲染完成后再执行绑定事件和初始化显示的逻辑
- 隐藏行使用
display: none而不是visibility: hidden，前者会让元素不占据页面空间，后者只是不可见但仍占位置 - 如果页面中有多个表格需要类似功能，可以把逻辑封装成可复用的函数，通过传入不同的选择器参数适配不同场景
JavaScriptDOM操作表格行隐藏复选框状态前端交互修改时间：2026-07-08 01:54:27