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

我不熟悉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>

服务编号服务ID服务类型分配的服务服务/投诉详细信息当前状态服务/投诉日期付款服务图像
“alt=”上传图像“height=“50”width=“80”/
&时代；
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
} 

它显示表格列中的所有图像。但只有行顶部的图像弹出。在另一个屏幕上，我单击图像，但无法弹出。请提供解决方案。 谢谢..

使用class代替id，而是使用met getElementByClassName（）文档，它获取数组中的所有节点

编辑：我在床上，我不喜欢在电话里使用编辑

一个ID在一个页面中应该是唯一的。但是，如果有多个 存在具有指定ID的元素，getElementById（）方法 返回源代码中的第一个元素

因此：

// 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";
} 

使用class代替id，而是使用met getElementByClassName（）文档，它获取数组中的所有节点

编辑：我在床上，我不喜欢在电话里使用编辑

一个ID在一个页面中应该是唯一的。但是，如果有多个
存在具有指定ID的元素，getElementById（）方法
返回源代码中的第一个元素

因此：

// 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";
} 

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

<img class="myImg"

img = document.getElementByClassName('myImg');

var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementsByClassName（'myImg'）；
//窗口警报（img）；
var i=img.长度；
var j；
var modalImg=document.getElementById（“img01”）；
//var captionText=document.getElementById（“caption”）；
对于（j=0；j在Stackoverflow用户的帮助下，我能够解决以下问题：代码

<img class="myImg"

img = document.getElementByClassName('myImg');

var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementsByClassName（'myImg'）；
//窗口警报（img）；
var i=img.长度；
var j；
var modalImg=document.getElementById（“img01”）；
//var captionText=document.getElementById（“caption”）；
for（j=0；jt感谢您的回复。我感谢您的建议。如果您用一个示例进行解释会更有帮助。我没有看到您的代码，但我已经猜到您的问题是什么。提示：getElementByClassName（）返回了什么？如果您仍然无法搜索问题13667533，我做了一些更改，但没有任何效果，我会在这里发布我在js文件中添加的代码
code
var modal=document.getElementsByClassName（'modal'）；var img=document.getElementsByClassName（'myImg'）；//var modalImg=document.getElementById（'img01”）；var modalImg=document.getElementsByClassName（“模态内容”）；//window.alert（模态内容）；img.onclick=function（）{modal.style.display=“block”；modalImg.src=this.src；}var span=document.getElementsByClassName（“close”）[0]；span.onclick=function（）{modal.style.display=“none”；}您粘贴的内容不可读，请阅读此内容，看看这是否解决了您的问题，如果不是，您可能已经对代码进行了大量更改，您可能应该发布一个新问题，然后重新恢复问题所在的位置，这很有魅力。您的建议可以帮助我开发代码。感谢您的回复。我感谢您的建议。它将如果你用一个例子来解释，会更有帮助。我没有看到你的代码，但我已经猜到你的问题是什么。提示：getElementByClassName（）返回了什么？如果您仍然无法搜索问题13667533，我做了一些更改，但没有任何效果，我会在这里发布我在js文件中添加的代码
code
var modal=document.getElementsByClassName（'modal'）；var img=document.getElementsByClassName（'myImg'）；//var modalImg=document.getElementById（'img01”）；var modalImg=document.getElementsByClassName（“模态内容”）；//window.alert（模态内容）；img.onclick=function（）{modal.style.display=“block”；modalImg.src=this.src；}var span=document.getElementsByClassName（“close”）[0]；span.onclick=function（）{modal.style.display=“none”；}您粘贴的内容不可读，请阅读此内容，看看这是否解决了您的问题，如果不是，您可能对代码进行了太多更改，您可能应该发布一个新问题，然后重新恢复问题所在的位置，它就像一个符咒一样工作。您的建议帮助我开发代码。非常感谢您的修复，仅为了关闭此对话框您需要添加var span=document.getElementsByClassName（“close”）[0]；非常感谢您为关闭您需要添加var span=document.getElementsByClassName（“close”）的模式所做的修复[0]；