javascript - 如何通过单击屏幕上的表格列来弹出图像

Question

我是 PHP 和 Java 脚本新手。我有一张表，有 5 行和 3 列。每行都有一个图像显示在列中。图像路径存储在数据库表中。因此，当我从数据库表中获取结果时，图像会正确显示。我正在使用 js 和 css 在单击时弹出图像。但问题是只有最上面一行的图像可以弹出，其他图像无法弹出。 这是 PHP 代码:

<table align = "center" border="1" cellspacing="7" cellpadding="7"> 
 <tr>
    <th>S.No.</th><th>Service ID</th><th>Service Type</th></th><th>Alloted Serviceman</th><th>service/Complaint Detail</th><th>Current Status</th><th>Service/Complaint Date</th><th>Payment</th><th>Service image</th>
</tr>
<?php
while($row1 = mysqli_fetch_array($result1))
{
?>

<tr>
    <td><?php echo ++$i;?></td><td><a href="servicedetail.php?scode=<?php echo $row1['service_id'];?>"><?php echo $row1['service_id'];?></a></td><td><?php echo $row1['service_type'];?></td><td><?php echo $row1['technician_name'];?></td><td style="max-width:200px;"><?php echo $row1['service_detail'];?></td><td><?php if ($row1['status'] == 1) { echo "Confirmed" ;} else { echo "Pending"; }?></td><td><?php echo $row1['service_date'];?></td><td><?php echo $row1['service_charges'];?></td><td><img id="myImg" src = "./<?php echo $row1['s_image'];?>" alt= "upload image" height="50" width="80"/></td>
</tr>

<?php } ?>
</table>
</fieldset>
<!-- The Modal -->                              
 <div id="myModal" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
</div>

下面是帮助弹出图像的java脚本文件代码

// Get the modal
var modal = document.getElementById('myModal');
//window.alert(modal);
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
} 

它显示表列中的所有图像。但仅弹出行图像的顶部。在其他情况下，我单击图像但无法弹出。请提供解决方案。 谢谢..

Answer 1

there should only be one unique id in HTML

使用 class 代替 id，并使用文档 getElementByClassName() 代替，它会获取数组中的所有节点

编辑:我躺在床上，我不喜欢在手机上使用编辑器

An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.

因此:

<img class="myImg"

img = document.getElementByClassName('myImg');