Javascript 基于MySQL的鼠标悬停JQuery

我有一张桌子，上面有一周的手术时间。我一直在查看JQuery鼠标悬停在行id上方时会显示一个弹出窗口。我需要它根据id打印行。要更清楚，请先查看此屏幕截图：

你可以在周三上午10点的屏幕截图上看到Moe和id 4有个约会。当用户将鼠标悬停在4上时，将显示一个弹出窗口，其中包含与该id相关联的行。因此，对于4，它将是： PatientId-1934，apptDate-2015-12-02，姓氏-Aqeel，医生姓名-Moe，altamORpm-Y，altdate-Y，altdoctor-Y，booked-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>';

?>

---

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


a span{显示：无；位置：绝对；颜色：fff；背景：000；填充：5px；}
{位置：相对；}
a:悬停span{display:block；text align:center；}
如果没有HTML和PHP标记，我只能猜测一些解决方案：

首先-当您获取数据时，您可以将其嵌入HTML中，以便使用@Praveen建议的选项

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

如果希望得到一些帮助，您需要再次在这里发布您的HTML和PHP代码。您的屏幕截图看起来不错，但没有给我们任何有关您收集数据的方式的信息。
是否有方法将其连接到我的数据库，并在鼠标悬停时打印行@PraveenKumar@Tuks对这样写标记，给出数字而不是
悬停我和您希望它显示的任何内容，而不是
你好，世界@Tuks当然。完成后请告诉我。当你发现答案有用时，也请接受它。我现在正在尝试查看它，我不明白，我如何查询数据库以返回我希望在小弹出窗口中显示的结果？这是我在这里的代码：你的答案很好，我给了一个记号，你有没有可能给我指出正确的方向来解决这个未知的索引？感谢您迄今为止提供的所有帮助：）@PraveenKumar