在前端页面开发中，通过按钮控制表格的显示与隐藏是非常常见的交互需求，既可以让页面布局更简洁，也能提升用户操作的便捷性。实现这个功能不需要复杂的框架，仅用原生HTML和JavaScript就能完成。
基础HTML结构搭建
首先需要搭建包含控制按钮和目标表格的基础HTML结构，按钮用于触发显示隐藏操作，表格是需要被控制的元素。这里给按钮和表格分别添加唯一的id，方便后续通过JavaScript获取元素。
<!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-top: 20px;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
button {
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 控制按钮 -->
<button id="toggleBtn">隐藏表格</button>
<!-- 目标表格 -->
<table id="targetTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>前端开发</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>后端开发</td>
</tr>
</tbody>
</table>
</body>
</html>
JavaScript逻辑实现
接下来需要编写JavaScript代码，给按钮绑定点击事件，在点击时切换表格的显示和隐藏状态，同时更新按钮的显示文本。
获取DOM元素
首先通过getElementById方法获取按钮和表格元素，这是操作DOM的基础步骤。
绑定点击事件
给按钮添加click事件监听器，在事件触发时判断表格当前的显示状态，然后执行对应的显示或隐藏操作。
控制元素显示隐藏有两种常用方式，一种是修改style.display属性，另一种是修改style.visibility属性，两者的区别是display:none会让元素完全脱离文档流，不占据原有空间，而visibility:hidden只会隐藏元素，仍会保留原有空间。这里我们使用更常用的display属性实现。
// 获取按钮和表格元素
const toggleBtn = document.getElementById('toggleBtn');
const targetTable = document.getElementById('targetTable');
// 给按钮绑定点击事件
toggleBtn.addEventListener('click', function() {
// 判断表格当前是否显示
if (targetTable.style.display === 'none') {
// 当前隐藏，切换为显示
targetTable.style.display = 'table';
// 更新按钮文本
toggleBtn.textContent = '隐藏表格';
} else {
// 当前显示，切换为隐藏
targetTable.style.display = 'none';
// 更新按钮文本
toggleBtn.textContent = '显示表格';
}
});
注意事项
- 表格的默认
display属性值是table，所以恢复显示时要设置成table而不是block，否则表格的布局样式会异常。 - 如果初始时表格是隐藏的，需要给表格添加
style="display:none"属性，同时按钮的初始文本设置为显示表格。 - 如果页面中有多个需要控制的表格，可以给按钮和表格添加相同的类名，通过循环绑定事件，避免重复编写代码。
多表格控制扩展示例
如果页面中有多个表格需要分别控制，可以通过以下方式实现，给每个按钮和对应的表格添加相同的自定义属性关联：
<button class="toggleTableBtn" data-table-id="table1">隐藏表格1</button>
<table id="table1" class="targetTable">
<tr><td>表格1内容</td></tr>
</table>
<button class="toggleTableBtn" data-table-id="table2">隐藏表格2</button>
<table id="table2" class="targetTable">
<tr><td>表格2内容</td></tr>
</table>
<script>
const toggleBtns = document.querySelectorAll('.toggleTableBtn');
toggleBtns.forEach(btn => {
btn.addEventListener('click', function() {
const tableId = this.getAttribute('data-table-id');
const table = document.getElementById(tableId);
if (table.style.display === 'none') {
table.style.display = 'table';
this.textContent = '隐藏' + tableId;
} else {
table.style.display = 'none';
this.textContent = '显示' + tableId;
}
});
});
</script>
HTMLJavaScript表格显示隐藏按钮事件前端交互修改时间：2026-07-21 20:48:41