mouseover показать полные данные ячейки

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

так: «Это имя с очень длинной строки в нем данных» становится «Это имя с очень длинный .....»

, что я пытаюсь do создает наведение мыши на то, что если вы наведете курсор на эту ячейку, она отобразит полное значение в небольшом всплывающем окне.

<script> 

$(function(){ 

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

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

несколько вопросов.

1. Как определить селектор. эта таблица может иметь множество строк, так как я могу сказать селектору, чтобы получить значение ячейки в строке im, которую в настоящее время мышь?

2. Как передать значение ячейки в 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.how ли я передать значение ячейки в JQuery для отображения?

Сформировать яваскрипт код из вашего PHP стороны, которая присвоит свое полное значение имени элемента, как "$(tr#".$value['number'].")[0].fullName =".$value['name']. Затем вы можете получить доступ к this.fullName в своем обработчике.

(я считаю, что это самый чистый способ 2. другие способы добавлении HTML-элементов с display: none стайлинга для хранения информации или добавления пользовательских атрибутов для вашего т.р. элемента.)

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 hover для изменения содержимого элемента. Обратите внимание, что это скорее доказательство концепции, чем работающий и проверенный код, это просто идея. См. jQuery hover() и jQuery data() функции для справки.