На этом шаге мы рассмотрим выделение строк, принадлежащих одному автору.

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

    Как и в случае выделения чередующихся строк, мы можем изменять внешний вид выделенных строк, добавляя к ним класс CSS:

#content tr.highlight {
  background: #ff6;
}

    Очень важно дать точное определение класса highlight, чтобы он переназначал цвет фона классов even и odd.

    Теперь нам необходимо выбрать соответствующую ячейку и подключить к ней обработчик события с помощью метода .click():

$(document).ready(function() {
  var $authorCells = $('table.striped td:nth-child(3)'); 
  $authorCells.click(function() { 
  // Здесь выполняется выделение строк
  });
});  

    Обратите внимание, что в выражении селектора мы использовали псевдокласс :nth-child(n), чтобы указать на третий столбец, в котором содержится информация об авторе. Эту константу 3 желательно было бы поместить где-то в одном месте в программном коде, чтобы ее проще было изменить, если вдруг позднее структура таблицы изменится. По этой причине, а также из соображений эффективности мы сохраняем результат выбора по селектору в переменной $authorCells вместо того, чтобы запускать селектор каждый раз, когда это будет необходимо.

    После того как пользователь щелкнет на ячейке в третьем столбце, нам необходимо сравнить текст в ячейке с текстом в ячейках того столбца во всех остальных строках. При совпадении текста необходимо переключить класс highlight. Другими словами, если класс в ячейке отсутствует, его необходимо добавить, а если он присутствует, - удалить. Благодаря такой реализации можно щелкнуть на ячейке с именем автора, чтобы убрать выделение строки, если одна или более строк с этим же автором уже была выделена щелчком мыши.

$(document).ready(function() {
  var $authorCells = $('table.striped td:nth-child(3)'); 
  $authorCells.click(function() { 
    var authorName = $(this).text(); 
    $authorCells.each(function(index) { 
      if (authorName == $(this).text()) { 
        $(this).parent().toggleClass('highlight');
      }
    });
  });
});  

Рис.1. Окраска строк с одной фамилией автора

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

$(document).ready(function() {
  var $authorCells = $('table.striped td:nth-child(3)'); 
  $authorCells.click(function() { 
    var authorName = $(this).text(); 
    $authorCells.each(function(index) { 
      if (authorName == $(this).text()) { 
        $(this).parent().toggleClass('highlight');
      }
      else {
        $(this).parent().removeClass('highlight');
      }
    });
  });
});  

Рис.2. Исправленная окраска строк с одной фамилией автора

    На следующем шаге мы рассмотрим подсказки.

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