jQuery post / Ajax，一个按钮定位表的不同值

Question

我已经创建了一个代码，用于显示数据库中的某些数据。然后用户可以选择是否要打开pdf files之一。

这是我的问题：

单行

当表只有一行时，则文件打开perfectly。

两行或更多行

如果我的表有多行，那么什么也不会发生。。[[无错误但也有[[无响应

我曾尝试使用$(this).closest("tr")，但是没有用

我的文件

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>
<div>
<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>
</div>
<div>
<?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" id='filename' value='<?php echo $row['filename']; ?>'></td>
            <td><?php echo floor($row['size']/1000);
            echo "KB"; ?></td>
            <td><button class="button1" id="button1">OPEN</button></td>
            <td><button class="button2" id="button2">DOWNLOAD</button></td>

        </tr>
<?php
}


?>
</div>
</table>
</div>
<p  id="open"></p>

<script>
        $(document).ready(function(){

            $("#button1").click(function(){
                //var extension = $(this).closest("tr").find(".Extension").text();
                var filename =  $("#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>";
?> 

Answer 1

displaySearchResults

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--css -->
<link rel="stylesheet" href="resultTable.css">
<!-- Display  Results -->
<div class="header">
<h1>Αποτελέσματα  Αναζήτησης <img src="" width></h1>
<hr> 
</div>

<div class="result_table">
<table>
<div>
<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>
</div>
<div>
<?php
    $x = 0 ;

    while  ($row = mysqli_fetch_assoc($result)){
        $x = $x + 1;

?>
        <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" id='filename<?php echo $x?>' value='<?php echo $row['filename']; ?>'></td>
            <td><?php echo floor($row['size']/1000);
            echo "KB"; ?></td>
            <td><button id="button1<?php echo $x?>" class="button1">OPEN</button></td>
            <td><button id="button2<?php echo $x?>" class="button2">DOWNLOAD</button></td>

        </tr>

<?php
}


?>
<input type="hidden" id='buttonvalue' value='<?php echo $x; ?>'>


</div>
</table>
</div>
<p  id="open"></p>

<script>

function createCallback( i ){
  return function(){
    //alert('you clicked' + i);
    var filename =  $("#filename"+i).val();
                    $.post("openFile.php", 
                    {
                        filename: filename  
                    },function(data){
                        $("#open").html(data);

                    });


  }
  }

        $(document).ready(function(){
            var x = $("#buttonvalue").val();
            for(var i = x; i > 0; i--) {

                $("#button1"+i).click(createCallback( i ));


           }

        });
</script>

openFile.php

<?php 

$filename = $_POST['filename'];



echo "<iframe src=\"$filename\" width=\"100%\" style=\"height:100%\"></iframe>";

?>