jQuery Post/Ajax表格多行时按钮无法打开PDF文件问题求助

看起来你遇到的核心问题是重复的HTML ID导致事件绑定失效，再加上表格结构不符合规范影响DOM遍历，这才造成了多行数据时按钮无响应的情况。具体来说：

1. 重复ID的问题：你在循环里给每个按钮和隐藏输入框都用了相同的id="button1"、id="filename"，但HTML规范里ID必须是页面唯一的。jQuery的$("#button1").click()只会给第一个匹配到的元素绑定事件，后面的按钮根本没被绑定，所以点击自然没反应。
2. 表格结构不规范：你用<div>包裹<th>和<tr>，这不符合HTML表格的结构标准，可能会干扰closest("tr")这类DOM遍历方法的正确性。

具体修复步骤 #

1. 修正表格结构 #

把表格里的<div>替换成标准的<thead>和<tbody>，让表格结构符合规范：

• <th>放在<thead>内部的<tr>里
• 循环生成的<tr>放在<tbody>里

2. 替换重复ID为Class #

把循环里的id属性换成class，因为class可以重复使用，用来标记同类元素：

• 隐藏输入框：class="hidden-filename"（去掉id）
• OPEN按钮：class="open-btn"（去掉id）
• DOWNLOAD按钮：class="download-btn"（去掉id）

3. 修改JS事件绑定逻辑 #

绑定class选择器的点击事件，通过$(this)定位当前按钮，再遍历到所在行的隐藏输入框获取文件名：

• 用$(".open-btn").click()代替$("#button1").click()
• 用$(this).closest("tr").find(".hidden-filename").val()获取当前行的文件名

修改后的完整代码 #

displaySearchResults.php #

<!--css -->
<link rel="stylesheet" href="resultTable.css">
<!-- Display Results -->
<div class="header">
<h1>Αποτελέσματα Αναζήτησης <img src="" width></h1>
<hr>
</div>
<div class="result_table">
<table>
  <thead>
    <tr>
      <th>Όνομα Ιδιοκτήτη</th>
      <th>Περιοχή</th>
      <th>Οδός / Θέση</th>
      <th>Οικοδομικό Τετράγωνο (Ο.Τ)</th>
      <th>Έτος Ανασκαφής</th>
      <th>Αριθμός Σχεδιαστικού Αρχείου</th>
      <th>Λέξεις Κλειδία</th>
      <th>Αρχαιολόγος</th>
      <th>Όνομα Αρχείου</th>
      <th>Μέγεθος Αρχείου</th>
      <th>Open file</th>
      <th>Download file</th>
    </tr>
  </thead>
  <tbody>
    <?php while ($row = mysqli_fetch_assoc($result)){ ?>
    <tr>
      <td><?php echo $row['owner_name']; ?></td>
      <td><?php echo $row['area']; ?></td>
      <td><?php echo $row['street']; ?></td>
      <td><?php echo $row['building_block']; ?></td>
      <td><?php echo $row['year']; ?></td>
      <td><?php echo $row['number']; ?></td>
      <td><?php echo $row['key_words']; ?></td>
      <td><?php echo $row['archeologist']; ?></td>
      <td><?php echo $row['filename']; ?>
      <input type="hidden" class='hidden-filename' value='<?php echo $row['filename']; ?>'></td>
      <td><?php echo floor($row['size']/1000); echo "KB"; ?></td>
      <td><button class="button1 open-btn">OPEN</button></td>
      <td><button class="button2 download-btn">DOWNLOAD</button></td>
    </tr>
    <?php } ?>
  </tbody>
</table>
</div>
<p id="open"></p>
<script>
$(document).ready(function(){
  $(".open-btn").click(function(){
    var filename = $(this).closest("tr").find(".hidden-filename").val();
    $.post("openFile.php", { filename: filename },function(data){
      $("#open").html(data);
    });
  });
});
</script>

openFile.php（无需修改） #

<?php
$filename = $_POST['filename'];
echo "<iframe src=\"$filename\" width=\"100%\" style=\"height:100%\"></iframe>";
?>

这样修改后，不管表格有多少行，每个OPEN按钮都会正确绑定事件，并且能获取到对应行的文件名，点击后就能正常调用openFile.php展示PDF了。

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