Закрыть ... [X]

Как сделать ссылку на всю ячейку таблицы

Добавлено: 11.09.2018, 01:57 / Просмотров: 43462

В этой статье я покажу, как можно при помощи jQuery сделать строку таблицы полностью кликабельной (ссылкой).

Репутация таблиц среди разработчиков далека от идеальной, тем не менее, существует масса ситуаций, когда вид выводимой информации делает необходимым их использование. Ведь, напомню, смысл семантики заключается в использовании для представления правильных тегов, например, к заголовку следует применять тег h1 (h2, h3 и т. д.), таблицы обрамлять тегом table.

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

строка-ссылка

Существует несколько способов сделать строки кликабельными. Опишем, как это можно сделать с помощью jQuery. Начнем с разметки:

HTML

<table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr class="even"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr class="even"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> </tbody> </table>

Теперь, чтобы сделать строку полностью кликабельной (не вставляя при этом в каждую ячейку тег a), в атрибут строки data-href добавим URL той странички, на которую перейдет пользователь при клике по строке. Новая разметка будет выглядеть так:

HTML

<table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Actions</th> </tr> </thead> <tbody> <tr data-href="http://google.com"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr class="even" data-href="http://google.com"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr data-href="http://google.com"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> <tr class="even" data-href="http://google.com"> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td><a href="#">Edit</a> <a href="#">Delete</a></td> </tr> </tbody> </table>

Вот все, что касается HTML. Перейдем к javascript:

JQuery

jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }); });

В приведенном выше коде каждой строке добавлен класс clickable, таким образом, при необходимости дизайн строк-ссылок можно менять. Теперь, кликнув по строке, произойдет переход на новую страницу.

Есть, однако, одна маленькая проблема. Если в разметке есть ссылка, как в колонке.Actions, то при клике по ней произойдет переход на страничку, url которой будет соответствовать атрибуту data-href строки, а не ссылки.

javascript, где эта проблема решена, будет выглядеть так:

JQuery

jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); }); }); // метод find возвращает ссылку (а), которая является // потомком строки (tbody tr[data-href]) // у метода hover два события mouseenter и mouseleave - // по первому кликабельность ссылки включается //(через удаление всех событий для строки - unbind) // по второму выключается

Теперь, когда курсор находится над ссылкой, кликабельность «включается» и при клике происходит желаемый эффект. Когда же курсор покидает ссылку, она «выключается». Демо, где показано, как все как сделать ссылку на всю ячейку таблицы это работает, ниже.

demo

Источник

Комментарии к статье

  • Категории
  • Архив

азы HTML   селекторы CSS   ошибки IE   закругление CSS   Свойства CSS3   блочная верстка   jQuery скроллинг   эффекты jQuery   jQuery плагины   CSS ссылки   Sublime Text 2   Веб инструменты   Свойства CSS   Обработка форм php   текст в css   основы PHP   jQuery галерея   HTML5   сетки ячейку для верстки   clearfix css   Ссылки jQuery   Слайдер jQuery   основы jQuery   основы javascript   объекты javascript   PHP ООП   SASS   AJAX примеры   выборка jQuery   Серверное программирование   атрибуты HTML   валидация формы   плагин validation   Twitter Bootstrap   Шаблоны javascript   webpack  


Источник: http://dnzl.ru/view_post.php?id=203


Как сделать ячейку таблицы ссылкой


Как сделать ссылку на всю ячейку таблицы

Похожие новости


Дочь поднимает руку на свою мать
Обувные коробки своими руками фото
Как сделать самодельную жижу
Сеть из веревок своими руками
Уход за свиньями в домашних условиях


СЕЙЧАС ЧИТАЮТ