画面上のテーブルの列からクリックして画像をポップアップする方法

Question

PHPとJava Scriptを初めて使用しています。私は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> 

それはテーブルの列内のすべての画像を表示する画像

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

をポップアップするヘルプJavaスクリプトファイルのコードです。行画像の先頭だけがポップアップ表示されます。他の画像をクリックするとポップアップできません。ソリューションを提供してください。アレイ

EDIT内のすべてのノードをフェッチする代わり おかげ..

Answer 1

there should only be one unique id in HTML

代わりのID、使用するクラス、およびドキュメントを使用するには（getElementByClassNameに会った）、私はベッドにいたとIドンエディタを電話で使用したいのですが、

IDはページ内で一意である必要があります。ただし、指定されたIDを持つ要素が1つ以上存在する場合、getElementById（）メソッド は、ソースコードの最初の要素を返します。したがって

：私はここでの問題を解決することができる午前StackOverflowのユーザーの助けを借りて

<img class="myImg" 

img = document.getElementByClassName('myImg'); 

Answer 2

は私がちょうどPHPで画像タグの使用中のクラスmyImgを追加

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

コードです