Как сделать всплывающие изображения из моей базы данных внутри таблицы

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>

Затем я делаю тело моего стола, и это нормально, за исключением моего столбца. Image

    <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

Я нашел ответ на мой вопрос с вашей помощью. Я использовал метод, упомянутый Сатья Силаном, и переработал эту функцию с идеей Мишеля. Итак, я получаю:

<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>   

Таким образом, у меня есть уникальный идентификатор для каждого изображения, и функция переписывается так, что когда я нажимаю на значок, появляется всплывающее окно, а затем оно исчезает, если мы щелкнем по значку

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:

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'
  }


}

Вот небольшая скрипка, чтобы показать, как это работает

Answer 4

При создании строк необходимо, чтобы идентификатор диапазона, содержащего всплывающее окно, был уникальным для каждой из строк. Убедитесь, что это тот же идентификатор, который вы передаете функции в качестве параметра. например как показано ниже

<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>