0

さまざまなビットのデータを含む行のテーブルがあります。フィールド「名前」の 1 つに、長さが不明な文字列が含まれている可能性があります。テーブルの見栄えを良くするために、長さが 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>

いくつかの質問。

  1. セレクターを定義するにはどうすればよいですか。このテーブルには多数の行が含まれている可能性があるため、現在マウスオーバーしている行のセルの値を取得するようにセレクターに指示するにはどうすればよいですか?

  2. セルの値を jquery に渡して表示するにはどうすればよいですか?

別のSO投稿からこれを試しました。

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

 });

これは、すべてのチケットの名前を示しています。

4

2 に答える 2

0

1.How do i define the selector. this table could have numerous rows, so how can i tell the selector to get the value of the cell on the row im currently moused over?

The value of this in event handlers is the targeted element. So just use 

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

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

2.how do i pass the value of the cell to jquery for display?

Generate javascript code from your PHP side that will assign your full name value to the element, like "$(tr#".$value['number'].")[0].fullName =".$value['name']. You can then access this.fullName in your handler.

(I feel this is the cleanest way for 2., other ways are adding HTML elements with the display: none styling to store the info or adding custom attributes to your tr element.)

于 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 に答える