Question

[我在php上编写了所有代码，因此我的HTML代码在回显中]

所以我连接到数据库，我想在我的网站上显示数据，除了个人资料图片（PatientImage）之外，一切都很好

首先，我创建SQL命令行以从数据库中选择所有列

$sqlSelectP = "select * from tbl_patient";
$QResultSP = mysqli_query($DBConnect, $sqlSelectP);

然后我构建表，首先创建带有列名称的头

//Build Table
echo'
<table border="1">
    <thead>
        <tr>
            <td>FName</td>
            <td>LName</td>
            <td>Roomno</td>
            <td>Password</td>
            <td>address1</td>
            <td>address2</td>
            <td>Postal Code</td>
            <td>Grade Classification</td>
            <td>Image</td> 
        </tr>
    </thead>

然后我做表格的主体，这很好，除了我的图像列

    <tbody>';
while (($Row = $QResultSP->fetch_assoc())) 
{
echo '
         <tr>
            <td>'.$Row['FName'].'</td>
            <td>'.$Row['LName'].'</td>
            <td>'.$Row['Roomno'].'</td>
            <td>'.$Row['Password'].'</td>
            <td>'.$Row['address1'].'</td>
            <td>'.$Row['address2'].'</td>
            <td>'.$Row['PostalCode'].'</td>
            <td>'.$Row['GradeClassification'].'</td>

因此，在“图像”列中，我将显示一个图标，实际上是一个用于显示该人的照片的弹出窗口的按钮。（我使用了https://www.w3schools.com/howto/howto_js_popup.asp中的代码）

但是在我的网站上，每行上的每个图标仅充当第一行弹出窗口的按钮

更新：现在我没有任何弹出窗口（即使我可以看到可以单击每个图标）

            <td> 
                <div class="popup" onclick="myFunction(myPopup'.$i.')">
                    <i class="fa fa-user-circle"></i>
                    <span class="popuptext" id="myPopup'.$i.'">
                        <img src="'.$Row['PatientImage'].'.png" alt="'. $Row['FName'].' - Profile Picture" width = "50%" height = "auto">
                    </span>
                </div>
                <script>
                // When the user clicks on div, open the popup
                function myFunction(popupId) 
                {
                var popup = document.getElementById(popupId);
                popup.classList.toggle("show");
                }
                </script>
            </td> 
        </tr>';

}
echo "</tbody></table>";

Answer 1

在创建行时，需要使包含弹出窗口的范围的ID对于每行都是唯一的。确保它也是您作为参数传递给函数的ID。例如像下面一样

<td> 
    <div class="popup" onclick="myFunction(myUniquePopupIdForThisImage)">
        <i class="fa fa-user-circle"></i>
        <span class="popuptext" id="myUniquePopupIdForThisImage">
            <img src="'.$Row['PatientImage'].'.png" alt="'. 
            $Row['FName'].' - Profile Picture" width = "50%" height = "auto">
        </span>
    </div>
<script>
// When the user clicks on div, open the popup
function myFunction(popupId){
    var popup = document.getElementById(popupId);
    popup.classList.toggle("show");
}
</script>
</td>

Answer 2

while(($Row = $QResultSP->fetch_assoc())){
...
...
echo '<td>
    <div class="popup" onclick="myFunction(\"myPopup'.$i.'\")">
        <i class="fa fa-user-circle"></i>
        <span class="popuptext" id="myPopup'.$i.'">
            <img src="'.$Row['PatientImage'].'.png" alt="'.$Row['FName'].' - Profile Picture" width="50%" height="auto">
        </span>
    </div>
</td>';
...
...
$i++;
}

在页面末尾放置此脚本

<script>
function myFunction(id) {
    var popup = document.getElementById(id);
    popup.classList.toggle("show");
}
</script>

尝试一下

Answer 3

使用event，也可能根本没有任何ID：

html

//add EVENT to the onclick
//use popuptext_hidden as classname
<div class="popup" onclick="myFunction(event)">
  <i class="fa fa-user-circle"></i>
  <span class="popuptext_hidden">
     <img src="hello.png" alt="hello.jpg" width = "50%" height = "auto">
  </span>
</div>

css：

.popuptext_hidden {  display: none }
.popuptext_show {  display: block }

该函数将使用event来定位按钮和图像：

javascript

编辑已编辑，因此onclick可以打开和关闭。现在也可以关闭其他弹出窗口。

function myFunction(event){

  //get the div that is clicked
  var button=event.target;

  //the span is the second child from the div 
  //(but the counting starts at 0, so it will be 1)
  var span=button.children[1];

   //toggle the span classname between show and hidden
  if (span.className === 'popuptext_show') {
    span.className = 'popuptext_hidden'
  } else {
    span.className = 'popuptext_show';
  }


// ** TURN OF ALL THE OTHER POPUPS THAT ARE OPEN
// so only one popup is open at any time
// (leave this out if you don't need it)

   //get list of all popups that are on
  var list = document.querySelectorAll('span.popuptext_show');
  for (var i=0, len=list.length; i<len; i++) {
    //leave the current span alone
    if(list[i]===span)continue;
    //turn off the rest
    list[i].className = 'popuptext_hidden'
  }


}

Here is a little fiddle to show how it works

Answer 4

在您的帮助下，我找到了问题的答案。我使用了Sathya Seelan提到的方法，并用Michel的思想重新设计了函数。所以我得到：

<div class="popup" onclick="myFunction(\'myPopup'.$i.'\')">
    <i class="fa fa-user-circle"></i>
    <span class="popuptext_hidden" id="myPopup'.$i.'">
        <img src="'.$Row['PatientImage'].'.png" alt="'. $Row['FName'].' - Profile Picture" width = "50%" height = "auto">
    </span>
</div>

<script>
    // When the user clicks on div, open the popup
    function myFunction(id){
        var popup = document.getElementById(id);
        console.log(popup);
        if(popup.classList.contains('show'))  {
            popup.classList.remove('show');
            popup.classList.add('popuptext_hidden');
        } else {
            popup.classList.remove('popuptext_hidden');
            popup.classList.add('show');
        }
    }
</script>

这样，我对每张图片都有唯一的ID，并且重写了函数，以便当我单击图标时，将出现弹出窗口，然后如果我们重新单击图标，它将消失

如何在表格内从数据库中弹出图像

4 个答案: