使用PHP+jQuery构建MySQL动态表格时，点击按钮后隐藏详情区块无法滑出显示的问题求助

我帮你排查下问题，核心原因出在重复ID的使用和动态元素的事件绑定方式上，下面一步步分析并修复：

问题根源分析 #

1. 重复ID违反HTML规则：你的PHP代码循环生成每行时，给所有详情段落都加了id="get_details"，给所有按钮加了id="get_details_button"。但HTML里ID必须是唯一的，jQuery用ID选择器只会匹配第一个元素，所以后面行的按钮点击根本不会触发对应行的详情显示。
2. 动态元素的事件绑定错误：直接用$("#get_details").click()绑定事件，只能绑定到页面加载时就存在的元素，而你的表格行是PHP动态生成的，这些元素在$(document).ready()执行时还不存在，所以事件绑定无效。

修复方案 #

1. 修改PHP代码：用类替代重复ID #

把生成详情和按钮的部分改成类（类可以重复使用），同时默认隐藏详情区块：

$sub_array = array(); 
$sub_array[] = $row["id"]; 
// 把id改为class，默认隐藏详情
$sub_array[] = $row["product_name"].'<p class="details-content" style="display:none;">'.$row["details"].'</p>'; 
// 去掉重复ID，保留类名用于事件绑定
$sub_array[] = '<button type="button" name="get_details" class="btn btn-success btn-xs get-details-btn">Get Details</button>'; 
$data[] = $sub_array; 

2. 修改jQuery代码：使用事件委托+相对定位 #

用事件委托绑定到父容器（比如表格），然后通过$(this)定位当前点击的按钮，再精准找到对应行的详情区块：

$(document).ready(function(){ 
  // 事件委托：绑定到已存在的表格，监听动态生成的按钮点击
  $("#user_data").on("click", ".get-details-btn", function(){ 
    // 找到当前按钮所在的行，再定位该行的详情内容
    $(this).closest('tr').find('.details-content').slideToggle("slow"); 
  }); 
});

3. 确认HTML结构 #

你的现有HTML表格结构没问题，确保表格的id="user_data"正确，并且动态行插入到<tbody>中：

<table id="user_data" class="table table-bordered table-striped"> 
  <thead> 
    <tr> 
      <th width="30%">Image</th> 
      <th width="50%">Product Name</th> 
      <th width="20%">Get Details</th> 
    </tr> 
  </thead>
  <tbody>
    <!-- PHP动态生成的行将插入到这里 -->
  </tbody>
</table>

为什么这样改能生效 #

• 类选择器：避免了重复ID的冲突问题，每一行的详情和按钮都可以通过类名被正确识别。
• 事件委托：把事件绑定到页面加载时就存在的父元素（表格）上，动态生成的按钮触发点击时，事件会冒泡到父元素被捕获处理。
• 相对定位：用closest('tr')锁定当前按钮所在的行，再用find('.details-content')定位该行的详情，确保点击按钮只会操作当前行的内容，不会影响其他行。

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