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

Question

我是 PHP 和 Java 脚本的新手。我有一个有 5 行和 3 列的表。在每一行中都有一个图像显示在列中。图像路径存储在 db 表中。所以当我从 db 表中获取结果时，图像会正确显示。我正在使用 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()代替，获取数组中的所有节点

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

一个 ID 在一个页面中应该是唯一的。但是，如果不止一个 指定ID的元素存在，getElementById()方法 返回源代码中的第一个元素。

因此：

<img class="myImg"

img = document.getElementByClassName('myImg');

Answer 2

在 Stackoverflow 用户的帮助下，我能够解决问题，这里是代码

 var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
//window.alert(img);
var i = img.length;
var j;
var modalImg = document.getElementById("img01");

//var captionText = document.getElementById("caption");
for(j=0;j<i;j++) {
    img[j].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");

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

我只是在 php 中使用的图像标签中添加类 myImg