表格每行按钮点击显示下拉列表仅首行生效的jQuery求助

嗨，我来帮你搞定这个问题！你的核心困扰源于HTML元素ID的唯一性规则：你给所有「pret」按钮都设置了同一个id="pret"，下拉框也重复使用了id="personnes"。在HTML规范里，ID是页面内独一无二的标识，jQuery的$("#pret")选择器只会匹配到页面中第一个拥有该ID的元素，这就是为什么只有第一行的按钮能触发下拉框切换。

下面给你分步解决：

1. 先修正HTML里的重复ID问题 #

把按钮的id="pret"改成class="pret"，下拉框的id="personnes"改成class="personnes"，这样可以通过class批量选择同类型元素。另外我注意到你的隐藏域取值写的是$donnees['id']，但数据库表字段是id_livre，这个小错误也一起修正：

<td>
 <form action="db/suppression.php" method="POST">
 <input type="hidden" name="id" value="<?php echo $donnees['id_livre']; ?>"/>
 <input type="submit" name="valider" class="delete" value="Supprimer" />
 <input type="button" name="pret" class="pret" value="pret" />
 <select class="personnes" name="personnes" hidden="hidden">
 <option value="personnes">People 1</option>
 <option value="personnes">People 2</option>
 <option value="personnes">People 3</option>
 <option value="personnes">People 4</option>
 </select>
 </form>
</td>

2. 编写正确的jQuery事件绑定代码 #

现在用class选择器绑定点击事件，并且通过DOM相对关系找到当前按钮对应的下拉框，避免影响其他行的元素。这里提供两种常用方案：

方案一：直接绑定class事件（适合静态渲染的表格） #

如果你的表格是一次性渲染完成的，直接给所有.pret按钮绑定点击事件即可：

$(document).ready(function() {
  // 给所有class为pret的按钮绑定点击事件
  $('.pret').on('click', function() {
    // 找到当前按钮同表单内的下拉框，切换显示/隐藏
    $(this).closest('form').find('.personnes').toggle();
    // 也可以用更简洁的写法：$(this).siblings('.personnes').toggle();
  });
});

方案二：事件委托（适合动态加载的表格） #

如果后续你会通过AJAX动态新增表格行，用事件委托更可靠——把事件绑定到父级容器（比如表格）上，能自动识别新增的元素：

$(document).ready(function() {
  // 把点击事件委托给表格，只响应.pret按钮的点击
  $('table').on('click', '.pret', function() {
    $(this).closest('form').find('.personnes').toggle();
  });
});

额外小提示 #

• toggle()方法会自动切换元素的显示/隐藏状态，你也可以用prop('hidden', function(i, val) { return !val; })来直接操作hidden属性，效果是一样的。
• 确保你已经在页面中正确引入了jQuery库，要在这段代码执行前加载（比如放在<head>标签里，或者在</body>前引入）。

这样修改后，每一行的「pret」按钮都能独立触发对应下拉框的显示/隐藏啦！

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