Question

我有一个包含各种数据位的行表。其中一个字段“name”可能包含长度未知的字符串。为了使表看起来很好，如果它的长度大于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";

所以“这是一个包含很长一串数据的名字” 变 “这是一个很长的名字......”

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

 <script>

 $(function(){

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

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

几个问题。

如何定义选择器。这个表可能有很多行，所以我如何告诉选择器获取当前moused上的单元格的值？
如何将单元格的值传递给jquery进行显示？

我从另一篇SO帖子中试过这个。

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

 });

显示每张单票的名称。

Answer 1

1.如何定义选择器。这个表可能有很多行，所以我怎么能告诉选择器获取行上单元格的值我目前被盯过？

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

$('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元素添加自定义属性。）

Answer 2

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()函数以供参考。

mouseover显示单元格的完整数据

2 个答案: