JQuery on mouseover с MySQL

Question

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

Вы видите на скриншоте Ср в 10 утра МОС встречу с идентификатором 4. Когда пользователь парит над 4 должно отображаться всплывающее окно с строками, связанными с этим id. поэтому для 4 будет: PatientId - 1934, apptDate - 2015-12-02, фамилия - Aqeel, doctorName - Moe, altamORpm - Y, altdate - Y, altdoctor - Y, забронированы - Y.

Как бы я начинаю это начинать? Я никогда раньше не использовал JQuery, поэтому, пожалуйста, несите меня. Любая помощь будет оценена.

Код:

<?php 
$page_title = 'DoctorAvailability'; 
include ('header.html'); 

echo '<h3>Doctor Availability</h3>'; 

require_once ('mysqli_connect.php'); 

$query = "SELECT * FROM booking"; 
$results = @mysqli_query ($conn, $query); 
$numrows = mysqli_num_rows($results); 

if ($results) { 
    if ($numrows >0) { 
     echo '<p>There are ' . $numrows . ' patience(s)</p>'; 
     echo '<table> 
     <tr> <td bgcolor="#DC0E03"><font color="#fff"><strong>Patient ID</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Surname</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>AM or PM</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Date Requested</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Time Requested</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Doctor</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Alternative AM or PM</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Alternative Date</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Alternative Doctor</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Date</stong></font></td> <td bgcolor="#DC0E03"><font color="#fff"><strong>Booked</stong></font></td> </tr>'; 

     while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)) { 
     echo '<tr><td bgcolor="#DC0E03"><font color="#fff">' . $row['id'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['surname'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['amORpm'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['apptDate'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['apptTime'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['doctorName'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['altamORpm'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['altdate'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">' . $row['altdoctor'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">'. $row['date'] . '</font></td> <td bgcolor="#9f9f9f"><font color="#fff">'. $row['booked'] . '</font></td> </tr>'; 
     } 
     echo '</table>'; 

     mysqli_free_result ($results); 
    } else { 
     echo '<p class="error">There are no patiences.</p>'; 
    } 
} else { 

echo '<h3 class="error">System Error</h3> 
    <p class="error">User data could not be retrieved.</p>'; 
} 

$query = "select ts.theTime,d.doctorName, 
bMon.id as bMon, bTue.id as bTue, bWed.id as bWed, bThu.id as bThu, bFri.id as bFri 
from timeSlots ts 
cross join doctors d 
left join booking bMon 
on bMon.apptDate=@Monday and bMon.timeSlotId=ts.id and bMon.doctorId=d.doctorId 
left join booking bTue 
on bTue.apptDate=date_add(@Monday, INTERVAL 1 DAY) and bTue.timeSlotId=ts.id and bTue.doctorId=d.doctorId 
left join booking bWed 
on bWed.apptDate=date_add(@Monday, INTERVAL 2 DAY) and bWed.timeSlotId=ts.id and bWed.doctorId=d.doctorId 
left join booking bThu 
on bThu.apptDate=date_add(@Monday, INTERVAL 3 DAY) and bThu.timeSlotId=ts.id and bThu.doctorId=d.doctorId 
left join booking bFri 
on bFri.apptDate=date_add(@Monday, INTERVAL 4 DAY) and bFri.timeSlotId=ts.id and bFri.doctorId=d.doctorId 
cross join (select @Monday:='2015-11-30') params 
order by ts.theTime,d.doctorName;"; 

$results = @mysqli_query ($conn, $query); 
//$numrows = mysqli_num_rows($results); 

if ($results) { 
    ?> 
    <table> 
     <tr> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>The Time</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Doctor Name</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Monday</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Tuesday</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Wednesday</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Thursday</stong></font></td> 
      <td bgcolor="#DC0E03"><font color="#fff"><strong>Friday</stong></font></td> 
     </tr> 
    <?php 
     while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)){ 
      ?> 
      <tr> 
       <td bgcolor="#DC0E03"><font color="#fff"><?php echo $row['theTime']; ?></font></td> 
       <td bgcolor="#BABABA"><font color="#fff"><?php echo $row['doctorName']; ?></font></td> 
       <td bgcolor="<?php if(empty($row['bMon'])){ echo '#179741'; }else{ echo '#cc362e'; } ?>"><font color="#fff"><?php echo $row['bMon']; ?></font></td> 
       <td bgcolor="<?php if(empty($row['bTue'])){ echo '#179741'; }else{ echo '#cc362e'; } ?>"><font color="#fff"><?php echo $row['bTue']; ?></font></td> 
       <td bgcolor="<?php if(empty($row['bWed'])){ echo '#179741'; }else{ echo '#cc362e'; } ?>"><font color="#fff"><?php echo $row['bWed']; ?></font></td> 
       <td bgcolor="<?php if(empty($row['bThu'])){ echo '#179741'; }else{ echo '#cc362e'; } ?>"><font color="#fff"><?php echo $row['bThu']; ?></font></td> 
       <td bgcolor="<?php if(empty($row['bFri'])){ echo '#179741'; }else{ echo '#cc362e'; } ?>"><font color="#fff"><?php echo $row['bFri']; ?></font></td> 
       <td><a href="#">Hover Me!<span class="tooltip">Hello World!</span></a></td> 
      </tr> 
      <?php 
     } 
    ?> 
    </table> 
    <?php 
    mysqli_free_result ($results); 
} else { 
    echo '<p class="error">There are no patients.</p>'; 
} 

mysqli_close($conn); 

?> 

<?php 
echo '<a href="update.php?\n">Click: --> Update Patient Personal Details <--</a>'; 

?> 

Answer 1

Вы можете использовать простую подсказку, как это:

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} 
 
a {position: relative;} 
 
a:hover span {display: block; text-align: center;}

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

Это только один из чистого раствора CSS.

---

Обновленный код

Можете ли вы изменить все эти:

<font color="#fff"><?php echo $row['bTue']; ?></font> 

что-то похожее на это:

<font color="#fff"> 
    <a class="popup"> 
    <?php echo $row['bFri']; ?> 
    <span><?php // Put whatever you want in this. ?></span> 
    </a> 
</font> 

И дать этот CSS:

a.popup span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;} 
a.popup {position: relative;} 
a.popup:hover span {display: block; text-align: center;} 

Answer 2

Без вашего HTML и PHP разметке я только догадываюсь некоторые решения:

Первый - Когда вы получите данные, которые вы можете вставлять его в HTML, так что вы можете использовать вариант, предложенный @Praveen.

Second - Вы можете использовать jquery ajax call для получения ваших данных, когда пользователь наведет 4 и отобразит соответствующие возвращенные данные.

Еще раз вам необходимо разместить здесь свой код HTML и PHP. Если вы хотите получить помощь. Ваш скриншот выглядит красиво, но не дает нам никакой информации о том, как вы собираете свои данные.