0

我有一个行表，其中包含各种数据位。“名称”字段之一可能包含长度未知的字符串。为了使表格看起来不错，如果它的长度大于 35，则 $name 的值是整个值的子字符串。

    if (strlen($value['name']) > 35)
    {
            $name = substr($value['name'],0,35) . "......";
    }
    else
    {
            $name = $value['name'];
    }
    echo "<tr id='" . $value['number'] . "'>";
            echo "<td width='10%'>" . $value['number'] . "</td>";
            echo "<td width='30%'>" . $name . "</td>";
            echo "<td width='10%'>" . $value['date_entered'] . "</td>";
            echo "<td width='10%'>" . $value['date_modified'] . "</td>";
            echo "<td width='1%'>" . $value['status'] . "</td>";
    echo "</tr>\n";

所以“This is a name with a very long string of data”变成了“This is a name with a very long.....”

我想要做的是创建一个鼠标悬停影响，如果你将鼠标悬停在这个单元格上，它将在一个小的弹出窗口中显示完整的值。

 <script>

 $(function(){

 $('tr').hover(function () {

 <<show some data here>>
});
});
</script>

几个问题。

  1. 我如何定义选择器。该表可能有很多行，那么我如何告诉选择器获取当前鼠标悬停的行上单元格的值？

  2. 如何将单元格的值传递给 jquery 进行显示？

我已经从另一个 SO 帖子中尝试过这个。

  $('#tickets tr').each(function() {
var ticketName = $(this).find("td").eq(1).html();    
    alert(ticketName);

 });

这显示了每张票的名称。

4

2 回答 2

0

1.如何定义选择器。该表可能有很多行，那么我如何告诉选择器获取当前鼠标悬停的行上单元格的值？

thisin 事件处理程序的值是目标元素。所以只需使用

$('tr').hover(function () {

 var ticketName = $(this).find("td").eq(1).html();
});

2.如何将单元格的值传递给jquery进行显示？

从您的 PHP 端生成 javascript 代码，将您的全名值分配给元素，例如"$(tr#".$value['number'].")[0].fullName =".$value['name']. 然后，您可以this.fullName在您的处理程序中访问。

（我觉得这是 2. 最干净的方法，其他方法是添加带有display: none样式的 HTML 元素以存储信息或向您的 tr 元素添加自定义属性。）

于 2013-10-10T14:02:03.847 回答
0

PHP：

if (strlen($value['name']) > 35)
{
        $name = substr($value['name'],0,35) . "......";
        $hove = true;
}
else
{
        $name = $value['name'];
        $hover = false;
}
echo "<tr id='" . $value['number'] . "'>";
        echo "<td width='10%'>" . $value['number'] . "</td>";
        echo "<td width='30%' ";
        echo 'data-shorttext="'.$name.'" ';
        echo 'data-fulltext="'.$value['name'].'">';
        echo $name . "</td>";
        echo "<td width='10%'>" . $value['date_entered'] . "</td>";
        echo "<td width='10%'>" . $value['date_modified'] . "</td>";
        echo "<td width='1%'>" . $value['status'] . "</td>";
echo "</tr>\n";

JavaScript：

$('#tickets tr').hover(function() {
     var $elmt = $(this);
     $elmt.html(elmt.data('fulltext')); 
},
function() {
     var $elmt = $(this);
     $elmt.html(elmt.data('shorttext')); 
});

php 代码为元素分配date-fulltext和date-shorttext属性，然后 jQuery 悬停事件处理程序使用这些元素来更改元素的内容。请注意，这更像是一个概念证明，而不是工作和测试的代码，它只是为了得到这个想法。请参阅jQuery hover()和jQuery data()函数以供参考。

于 2013-10-10T14:14:05.680 回答