PHP中实现点击按钮后显示指定数据表格的方法

两种方式都可以实现需求，没有绝对的对错，根据你的交互复杂度选就行。

1. 直接用onclick属性实现（极简场景适用） #

如果你的表格数据在页面加载时就已经通过PHP完成渲染，只是默认隐藏、点击按钮才展示，完全不需要额外写单独的JS函数，直接在onclick属性里写逻辑即可。

• 第一步：给表格加默认隐藏样式

<!-- 给table标签加行内样式，默认隐藏 -->
<table class="table table-striped table-bordered table-hover" id="matable" style="display: none;">
  <!-- 原表格thead、tbody、PHP循环代码保持不变 -->
</table>

• 第二步：直接给按钮的onclick属性填入显示逻辑

<div class="panel-body">
  <p>
    <button 
      type="button" 
      class="btn btn-lg btn-default" 
      id="parser" 
      name="parser" 
      onclick="document.getElementById('matable').style.display='table'"
    >
      Parser
    </button>
  </p>
</div>

这种写法只适合交互逻辑极简单的场景，如果后续要加加载提示、数据实时拉取、显示/隐藏切换之类的功能，内联代码会非常难维护。

2. 自定义JS函数/事件绑定（推荐，扩展性更强） #

如果后续可能扩展交互逻辑，比如点击按钮时才拉取最新数据、加加载动画、支持点击按钮切换表格显隐、做表格排序筛选，建议单独写JS逻辑，把HTML结构和交互代码解耦。
参考实现：

1. 保持表格默认隐藏，按钮的onclick属性留空即可
2. 在页面脚本标签里加如下逻辑：

// 等页面DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const table = document.getElementById('matable');
  const triggerBtn = document.getElementById('parser');
  // 默认隐藏表格
  table.style.display = 'none';

  // 绑定按钮点击事件
  triggerBtn.addEventListener('click', function() {
    // 这里可以扩展任意逻辑：比如发AJAX请求拿最新数据、加loading状态等
    table.style.display = 'table';

    // 如果需要点击按钮切换显示/隐藏，把上面一行换成下面的逻辑即可
    // table.style.display = table.style.display === 'none' ? 'table' : 'none';
  })
})

额外提示 #

你当前的PHP代码是页面首次加载时就直接查询数据库把所有表格数据渲染到页面里的，如果表格数据量很大，或者要求点击按钮时展示的是实时最新数据，不要把表格提前渲染到页面里隐藏，应该在按钮点击的回调里向后端发请求拿数据，再动态渲染表格内容，能大幅降低首屏加载的压力。

内容的提问来源于stack exchange，提问作者Hajar lyoubi