На этом шаге мы рассмотрим измененный пример реализации подсказки.

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

    Нам необходимо предусмотреть изменение текста подсказки, когда строка под указателем мыши уже содержит класс highlight. Это можно реализовать, добавив проверку условия в функцию showTooltip(). Eсли родительский элемент <tr> текущей ячейки уже имеет класс highlight, необходимо при создании подсказки вместо слова Выделить использовать Снять выделение:

     var action = 'Выделить ';
     if ($(this).parent().is('.highlight')) {
       action = 'Снять выделение ';
     }
     $tooltip
       .text(action + ' автора: ' + authorName)
       .show();

    Данная реализация корректно выбирает текст подсказки, когда указатель мыши наводится на ячейку, но нам необходимо повторно определить текст подсказки и в момент щелчка мышью. Для этого следует вызвать функцию showTooltip() внутри обработчика события click:

 $(document).ready(function() {
   var $authorCells = $('table.striped td:nth-child(3)');
   var $tooltip = $('<div id="tooltip"></div>').appendTo('body');
   
   var positionTooltip = function(event) {
     var tPosX = event.pageX;
     var tPosY = event.pageY + 20;
     $tooltip.css({top: tPosY, left: tPosX});
   };
   var showTooltip = function(event) {
     var authorName = $(this).text();
     var action = 'Выделить ';
     if ($(this).parent().is('.highlight')) {
       action = 'Снять выделение ';
     }
     $tooltip
       .text(action + ' автора: ' + authorName)
       .show();
     positionTooltip(event);
   };
   var hideTooltip = function() {
     $tooltip.hide();
   };
 
   $authorCells
     .addClass('clickable')
     .hover(showTooltip, hideTooltip)
     .mousemove(positionTooltip)
     .click(function(event) {
       var authorName = $(this).text();
       $authorCells.each(function(index) {
         if (authorName == $(this).text()) {
           $(this).parent().toggleClass('highlight');
         }
         else {
           $(this).parent().removeClass('highlight');
         }
       });
     showTooltip.call(this, event);
     });
 });

    Функция call() в языке JavaScript позволяет вызвать showTooltip() в области видимости обработчика события click ячейки с именем автора. Сделать это необходимо, чтобы во время выполнения функции showTooltip() ключевое слово this ссылалось на требуемый объект (данную ячейку таблицы).

    Теперь при наведении указателя мыши на уже выделенную строку подсказка содержит более уместное предложение, как показано на рисунке 1.

Рис.1. Подсказка содержит более уместное предложение

    На следующем шаге мы рассмотрим свертывание и развертывание разделов таблицы.

Предыдущий шаг Содержание Следующий шаг