В этой статье я покажу, как можно при помощи jQuery сделать строку таблицы полностью кликабельной (ссылкой).
Репутация таблиц среди разработчиков далека от идеальной, тем не менее, существует масса ситуаций, когда вид выводимой информации делает необходимым их использование. Ведь, напомню, смысл семантики заключается в использовании для представления правильных тегов, например, к заголовку следует применять тег h1 ( h2 , h3 и т. д.), таблицы обрамлять тегом table .
Самый распространенный подход к табличной информации — это наличие колонки, посредством которой пользователь может провести ряд действий со строкой (редактировать, удалить и т. д.). Для пользователя работу с таблицей можно упростить, сделав каждую строку кликабельной, или, иначе говоря, сделать строку таблицы ссылкой.
Существует несколько способов сделать строки кликабельными. Опишем, как это можно сделать с помощью jQuery. Начнем с разметки:
Теперь, чтобы сделать строку полностью кликабельной (не вставляя при этом в каждую ячейку тег a ), в атрибут строки data-href добавим URL той странички, на которую перейдет пользователь при клике по строке. Новая разметка будет выглядеть так:
Вот все, что касается HTML. Перейдем к javascript:
В приведенном выше коде каждой строке добавлен класс clickable , таким образом, при необходимости дизайн строк-ссылок можно менять. Теперь, кликнув по строке, произойдет переход на новую страницу.
Есть, однако, одна маленькая проблема. Если в разметке есть ссылка, как в колонке .Actions , то при клике по ней произойдет переход на страничку, url которой будет соответствовать атрибуту data-href строки, а не ссылки.
javascript, где эта проблема решена, будет выглядеть так:
Теперь, когда курсор находится над ссылкой, кликабельность «включается» и при клике происходит желаемый эффект. Когда же курсор покидает ссылку, она «выключается». Демо, где показано, как все это работает, ниже.
Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строке к чему-то другому, но все равно не могу заставить его работать.
У вас есть два способа сделать это:
Я сделал вторую работу, используя:
Чтобы избавиться от мертвого пространства между столбцами:
Ниже приведена простая демонстрация второго примера: DEMO
Я создал пользовательскую функцию jquery:
JQuery
Легко и идеально для меня. Надеюсь, это поможет вам.
(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)
Согласовано с Мэттом Кантором, используя данные attr. Отредактированный ответ выше
Если вы используете браузер, который поддерживает его, вы можете использовать CSS для преобразования в строку таблицы:
Конечно, вы ограничены тем, что не кладете элементы блока внутри . Вы также не можете смешивать это с помощью обычного
Обычный способ — присвоить JavaScript JavaScript атрибуту onClick элемента TR .
Если вы не можете использовать JavaScript, вы должны использовать трюк:
Добавьте одну и ту же ссылку к каждой TD той же строки (ссылка должна быть самым внешним элементом в ячейке).
Поверните ссылки на элементы блока: a
Последний заставит ссылку заполнить всю ячейку, поэтому щелчок в любом месте вызовет ссылку.
Если вам нужно использовать таблицу, вы можете поместить ссылку в каждую ячейку таблицы:
И заставьте ссылки заполнить все ячейки:
Если вы можете использовать
Вот CSS, который идет с методом
Вы не можете обернуть элемент
И добавьте его в таблицу следующим образом:
Ответ от sirwilliam лучше всего подходит мне. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывается страница на новой вкладке). Событие ctrlKey используется ПК, metaKey для Mac.
Javascript
Пример
Я знаю, что этот вопрос уже ответил, но мне все еще не нравится какое-либо решение на этой странице. Для людей, которые используют JQuery, я сделал окончательное решение, которое позволяет вам привести строку таблицы почти так же, как тег .
Это мое решение:
Javascript. Вы можете добавить это, например, в стандартный файл javascript.
HTML Теперь вы можете использовать это для любого элемента
Что-то вроде этого? Хотя он использует JS, но это единственный способ сделать строку (tr) доступной.
Если у вас нет одной ячейки с привязным тегом, который заполняет всю ячейку.
И тогда вы не должны использовать таблицу в любом случае.
Это избавит вас от необходимости дублировать ссылку в tr — просто выкинь ее из первого a.
После прочтения этой темы и некоторых других я придумал следующее решение в javascript:
Чтобы использовать его, поставьте href в tr/td/th, который вы хотите кликать, например:
Недостатком является то, что TRs не будет полностью работать как ссылки, такие как divs с display: table; , и они не будут выбираться на клавиатуре или иметь текст состояния. Изменить: я сделал навигация по клавиатуре, установив onkeydown, role и tabIndex, вы можете удалить эту часть, если нужна только мышь. Они не будут показывать URL-адрес в строке состояния при наведении курсора.
Вы можете специально указать ссылку TRs с помощью «tr [href]» селектора CSS.
У меня есть другой путь. Особенно, если вам нужно отправить данные с помощью jQuery
Установите переменную, задающую переменные в SESSIONS, на которых вы будете читать и действовать. страница
Мне бы очень хотелось, чтобы вы отправлялись прямо в окно, но я не думаю, что это возможно.
Когда я хочу имитировать ссылку со ссылкой, но соблюдая стандарты html, я делаю это.
Таким образом, когда кто-то идет с помощью мыши на TR, вся строка (и эта ссылка) получает стиль наведения, и он не видит, что существует несколько ссылок.
Собственно вопрос: как сделать так, чтобы строка таблицы была ссылкой?
Пока пришел вот к такому решению
Но сам понимаю, что это как-то костыльно. Просто в данном контексте использование именно тега