jQuerypost/Ajax，一个按钮可以定位表的不同值

Question

我创建了一个代码，用于显示数据库中的一些数据。然后用户可以选择是否要打开其中一个CCD_ 1。

这是我的问题：

单行

当表只有一行时，文件将完美地打开。

两行或多行

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

我尝试过使用$(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

终于找到了我的解决方案。检查它是否100%正确。

显示搜索结果

<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>";
?>