Question

我有一张桌子，显示一周的手术可用性。当用户将鼠标悬停在行ID上时，我一直在查看JQuery鼠标悬停以显示弹出窗口。我需要它根据id打印行。为了使这个更清楚，首先看一下这个截图：

你在星期三上午10点的屏幕截图中看到Moe预约了id 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

您可以使用这样的简单工具提示：

＆＃13;

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

＆＃13;

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

＆＃13;

这只是纯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提议的选项。

秒 - 当用户将鼠标悬停在4并相应地显示返回的数据时，您可以使用jquery ajax调用来获取数据。

再一次你需要在这里发布你的HTML和PHP代码如果你希望得到一些帮助。您的屏幕截图看起来不错，但没有向我们提供有关您收集数据的方式的任何信息。

使用MySQL进行鼠标悬停的JQuery

2 个答案: