Открыть меню    

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

В этой статье я покажу, как можно при помощи 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)
// по второму выключается 

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

Источник

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

аватарка пользователя
2012-10-30
Дмитрий

Возможно вопрос глупый, но зачем включать/ выключать кликабельность?

аватарка пользователя
2012-10-30
dnzl

глупых вопросов не бывает; кликабельность строки выключается, если в ячейки есть ссылка, иначе она не выключается. все просто

аватарка пользователя
2013-02-08
Alexey

Спасибо большое за статью! помогла!

аватарка пользователя
2013-02-14
Алексей

А как сделать не кликабельной только 1 td? Т.е. если в одной из ячеек стоит чекбокс - нада чтобы по клику на нем не было перехода. Плиз помогите с js кодом.

аватарка пользователя
2013-02-14
Костя

можно добавить класс нужной ячейки и в find добавить его

аватарка пользователя
2013-12-21
Александр

Мышка не меняет иконку на ту, когда ссылка нажимаемая!
Так нельзя! Юзеры будут тупить!

аватарка пользователя
2014-03-14
Gansik

Спасибо большое, то что искал :)

аватарка пользователя
2016-05-09
Anton

А как сделать чтобы открывалась во в новой вкладке?

аватарка пользователя
2017-07-05
Maksim

А куда в wordpress следует засунуть год jquery? В functions.php будет нормально?

аватарка пользователя
2017-11-13
Andrey

Что бы юзеры не тупили добавь это к коду отдельно от общего css

<style type="text/css">
td:hover {
cursor:pointer;
}
</style>

аватарка пользователя
2017-11-13
Andrey

можно не париться
<td onclick="location.href='#'" >...</td>

программа 1 с купить | демонстрационные конфигурации 1с | 1с комплексная автоматизация 2