Question

嗨，大家好我试图填充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>";

Answer 1

请更改<div> <div id = 'ToolTipDIv'

的ID

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

Answer 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>";

将mysql数据显示为html表格单元格中的工具提示

2 个答案: