在 html 表格单元 <td> 中将 mysql 数据显示为工具提示答案

【问题标题】：show mysql data as tooltip inside html table cell <td>在 html 表格单元 <td> 中将 mysql 数据显示为工具提示
【发布时间】：2012-06-15 17:54:55
【问题描述】：

大家好，我正在尝试使用鼠标悬停将 mysql 行填充为工具提示，但是我只是将第一行作为工具提示填充，您知道我缺少什么非常感谢您的帮助这里是我的代码，它只首先显示行作为工具提示框。

  $(function () {
        $(".test").hover(
            function () {

                            var toolTipHtml = $("#ToolTipDiv_ +'$id'").clone();

                $(this).append(toolTipHtml);
                toolTipHtml.show("slow");
            },
            function () {
                var toolTipHtml = $(this).find(".tooltip");

                toolTipHtml.hide();
                toolTipHtml.remove();
            }
        );

    });

     echo "<table>";
    while($row = mysql_fetch_array($result))
    {
          $id = $row['id_out_org'];
               echo "<tr>";  
             echo "<td>" .$row['KG']."</td>";        
            echo "<td class='test'>" .$row['B']."</td>";
            echo "<td >" .$row['B']."</td>";
            echo  "<td class='test'>"; 
            echo "<div id = 'ToolTipDiv_"/$id/"' class='tooltip' style='background-color: White; display: none; width: 20%;'>";

            echo "Total: $ "; echo $totalp = $total + $fuel;

            echo "</div>";
             "</td>";


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

【问题讨论】：

使用echo ($row['A']-$row['B']); 而不是echo $total = $row['A'] - $row['B'];

标签： php jquery mysql html-table

【解决方案1】：

请更改您的ID <div> <div id = 'ToolTipDIv'

每个元素的 ID 必须是唯一的那是你代码中的问题

【讨论】：

【解决方案2】：

Hardik 是对的，您只得到第一行，因为在 while 语句中创建的每个 div 的 ID 为“ToolTipDiv”，因此 jquery 只选择第一行。您可以做的是给 div 一个第二个类名并按类选择它，以便可以像您想要的那样使用所有 div。我认为这会奏效...

jQuery：

$(function() {
$(".test").hover(
function() {
    var toolTipHtml = $(this).next('.ToolTipDiv').clone();
    $(this).append(toolTipHtml);
    toolTipHtml.show("slow");
}, function() {
    var toolTipHtml = $(this).find(".tooltip");

    toolTipHtml.hide();
    toolTipHtml.remove();
});
});

PHP/HTML：

echo "<table class='style1' border='0' >";
while($row = mysql_fetch_array($result)) {
echo "<tr>";  
echo "<td>" .$row['KG']."</td>";        
echo "<td class='test'>" .$row['A']."</td>";
echo "<td >" .$row['B']."</td>";
echo "<td class='test'>"; 
echo "<div id = 'ToolTipDIv' class='tooltip ToolTipDiv' style='background-color: White; display: none; width: 20%;'>";
echo $total = $row['A'] - $row['B'];
echo "</div>";
echo "</td>";
echo "</tr>";           
}
echo "</table>";

【讨论】：

非常感谢我明白了这个想法，但我无法解决问题你知道如何为每个 div 提供 uniqe div id 我认为我可以像
但我不确定我会怎么做
如果你这样做了，你必须在你的 while 循环中包含一个 jQuery 函数来解释创建的每个单独的 id。前几天我在 Razor 中遇到了同样的问题。我能想到的最好的方法是将相同的类应用于所有人，现在一旦将一个悬停在使用“$（this）”选择器选择的所有内容上。因此， .next('.ToolTipDiv') 应该为您提供与您悬停的单元格相关联的工具提示。您可能会遇到问题，因为您有一个嵌套在 td 标记内的 div，这并不总是一个好主意。你可以用跨度代替吗？
是的，我做到了，但没有收到任何错误，提示框没有显示
我确定我的代码在某处有问题，您能否发布您的页面屏幕并显示您成功的工具提示是什么样的？
我只是再次编辑我的代码，但它仍然不起作用:(((也许你知道出了什么问题？