QTIP2 气球和 PHP 表:每行不同的气球内容

qtip2 balloons and php tables: different balloon content for each row?

本文关键字：气球 PHP QTIP2      更新时间：2023-09-26

我正在尝试使用 qtip2 jquery 插件制作包含内容的小 tooptips/balloons。以下是他们的.js和.css文件：

http://qtip2.com/download

我希望它适用于由 mysql 中的 php 填充的表。我像这样做表格：

 <tbody>
    <?php while($row = MySQL_fetch_array($result)): ?>
        <tr>
            <td title="lname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['last_name'])); ?>
                </div>
            </td>
            <td title="fname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['first_name'])); ?>
                </div>
            </td>    
            <td width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['u_name'])); ?>
                </div>
            </td>  
            <td width="100px">
                <div style="width:150px; overflow:hidden;">
                    <?php echo(htmlentities($row['skype_id'])); ?>
                </div>
            </td>
       </tr>
    <?php endwhile; ?>
</tbody>

所有丑陋的div 都在那里让它看起来更对齐。 反正...下面是工具提示的脚本：

        <script>$('td[title]').qtip({
                    show:'click',
                    hide:'unfocus',
                    content: {
                        text: "<?php echo(htmlentities($row['last_name'])); ?>"
                    }
                }); 
        </script>

问题是...我只能让它为每个带有"标题"的单元格显示相同的 friggin 内容。我希望气球显示特定于每个$row的内容。知道我该如何做到这一点吗？

根据文档：

您还可以指定一个返回内容的函数，该函数将 在每个连续的节目活动中运行。此函数可以返回两者 静态文本内容（文本或 HTML）或延迟对象（请参阅 下面）该函数以它的作用域作为目标元素执行， 以及分别是事件和 API 参数。

所以你可以这样做：

content: {
    text: function() {return $(this).closest("tr").find("[title=lname]").text();}
}

这个想法是，从目标元素范围（this）开始，我们知道这是一个td[title]，以某种方式为工具提示生成文本。由于标记中该文本的唯一实例位于td[title=lname]内，因此代码会找到该文本并返回其文本。

相关文章：