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'">×</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内のすべてのノードをフェッチする代わり おかげ..
ur response.iありがとうございました。あなたが例を使って説明すると、もっと役に立ちます。 –
あなたのコードは表示されませんが、私はすでにあなたの問題がどのようなものか推測できます。ヒント: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(modal-content); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } var span = document.getElementsByClassName( "close")[0]; span.onclick = function(){ modal.style.display = "none"; } –