как сделать целую строку в таблице кликабельной в виде ссылки?
Как насчет размещения прозрачного элемента перед строкой? Таким образом, он будет иметь все свойства реальной ссылки (строка состояния, средний щелчок и т. Д.), А также не изменит внешний вид таблицы (если это необходимо).
19 ответов
Вы используете Bootstrap, что означает, что вы используете jQuery: ^), поэтому один из способов сделать это:
Blah Blah 1234567 £158,000 Конечно, вам не нужно использовать href или switch location, вы можете делать все, что хотите, в функции обработчика кликов. Читайте на jQuery и как писать обработчики;
Преимущество использования класса над id заключается в том, что вы можете применить решение к нескольким строкам:
Blah Blah 1234567 £158,000 More money 1234567 £800,000 и ваша база кода не изменяется. Тот же обработчик позаботится обо всех строках.
Другой вариант
Вы можете использовать обратные вызовы Bootstrap jQuery, подобные этому (в обратном вызове document.ready ):
$("#container").on('click-row.bs.table', function (e, row, $element) < window.location = $element.data('href'); >); Это имеет преимущество не быть reset при сортировке таблицы (что происходит с другим вариантом).
Примечание
Поскольку это было отправлено window.document.location устарело (или, по крайней мере, устарело), используйте window.location .
Просто хотел добавить, что вы не должны использовать атрибут href для tr , так как это недопустимый атрибут для этого элемента. Вместо этого используйте атрибуты данных: data-url=»
Вы можете избежать использования класса в каждой строке и украсить таблицу именем класса clickable_row (CamelCase не соответствует стандартам HTML и должен быть в нижнем регистре (у меня были проблемы с кросс-браузерным обращением несколько раз с этим)), а затем jQuery $(‘.clickable_row tr’).click(function . Но на самом деле вы должны использовать data- для хранения данных, а не href поскольку это спецификация для пользовательских данных. data-url и jquery будут обращаться к ним как $(this).data(url);
К вашему сведению: Если вы можете, вы должны оставить ссылку где-то в tr для людей, у которых отключен Javascript.
Как правильно справиться с этой ситуацией? Правильный способ сделать это, используя только HTML и CSS, было бы вставить тег A в каждую ячейку и поместить его в width: 100% и height: 100% с display: block (или inline-block). Но наличие А в каждой клетке — это идея, которую я не одобряю так хорошо. Как ни то, что делает это Javascript. Это звучит слишком сложно.
@IvoPereira избегать JavaScript только ради того, чтобы избегать JavaScript в современном мире, это странно. Любой, кто решает отключить JavaScript для «безопасности», также делает выбор в пользу потери функциональности. Там нет необходимости обслуживать их.
Не большой поклонник этого решения, поскольку пользователи не видят URL-адрес ссылки в нижней части браузера при наведении курсора и, что более важно, не могут щелкнуть колесом ссылку, чтобы открыть ее на новой вкладке. Вставка a тег с display: block; внутри каждой ячейки немного раздражает, но это кажется наиболее подходящим способом решения этой проблемы.
@madmox обе ваши точки были вне поля для вопроса ОП. Я предположил бы, что в практическом приложении дизайнер интерфейса предпримет другие шаги. Например, достаточно просто обновить window.status событиями onhover, и средний щелчок или правый щелчок также могут быть захвачены. Сказав это, я лично НЕ использовал бы таблицы так, как их использует OP, я бы поместил свои данные в div. Я дал этот ответ, однако, потому что мне нравится держать полосу моего ответа очень узкой — всегда предполагая, что могут быть другие ограничения, на которые ОП не указал.
Вы не можете изменить window.status с конфигурацией по умолчанию любого современного браузера. Кроме того, на мой взгляд, «кликабельно как ссылка» означает не только «кликабельно левой кнопкой мыши». Это также весьма разочаровывает тем, что нужно отлавливать все события, уже реализованные для тегов гиперссылок. На бумаге это выглядит многообещающе (beacause: clean html), но, в конце концов, я вижу слишком много недостатков, чтобы не учитывать использование тегов внутри каждой ячейки таблицы или, как вы предложили, вообще не использовать таблицу (что также довольно разочарование для фактических табличных данных).
Как насчет $(‘.table > tbody > tr’).click(function() <. do stuff. >); даже не нужен класс, если вы хотите, чтобы строки (во всех таблицах на странице) были кликабельными. Это экономит много работы при добавлении нового класса в строки.
Вы также можете рассмотреть возможность использования делегирования on(‘click’, function()<. >) для регистрации обработчика события click с динамически созданными элементами (например, таблицей, которая была возвращена посредством вызова ajax).
window.document.location = . у меня не сработало, когда на странице был тег form на странице (например, другое поле выбора, которое использует javascript). Так что я пошел бы для @MaximeRossini решения с использованием с a display:block;
Как сделать ячейку таблицы ссылкой?
Как видно, если высота ячеек различается, то ссылка занимает не всю ячейку целиком — ссылка отстаёт от границ на величину padding у td , а высота ссылки равна высоте текста. Чтобы обойти эти ограничения, ячейку надо сделать с относительным позиционированием, а ссылку внутри неё — с абсолютным позиционированием. Размеры ссылки при этом задаются с помощью свойств left , right , top и bottom с нулевым значением — тогда ссылка будет занимать всю область ячейки целиком.
К сожалению, есть и ограничения — ячейка с абсолютно позиционированной ссылкой «схлопывается». Есть два решения:
- задать всей таблице свойство table-layout со значением fixed — ширина всех ячеек при этом станет одинаковой;
- явно установить ширину ячейки со ссылкой через свойство width.
В примере 2 показано добавление table-layout .
Пример 2. Использование position
| Ссылка | Если для простоты пренебречь потерями на теплопроводность, то видно, что волновая тень синхронизирует кварк без обмена зарядами или спинами. |
Результат данного примера показан на рис. 2.
Данное решение не работает в браузере Internet Explorer, в нём высота ссылки не равна высоте ячейки. Если нужна поддержка IE, то есть следующее решение, работающее и в других браузерах. Сперва вставляем ссылку в .
Затем в стилях дописываем следующие строки.
Использование JavaScript
Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.
Пример 3. Использование события onclick
| Ссылка | Если для простоты пренебречь потерями на теплопроводность, то видно, что волновая тень синхронизирует кварк без обмена зарядами или спинами. |
Поскольку ячейка с onclick не является привычной ссылкой, её нельзя самостоятельно открыть в новой вкладке и вообще понять что это ссылка. Для наглядности через стили меняем вид указателя на «руку».
См. также
- display
- display в CSS
- position
- position в CSS
- relative и absolute
- table-layout
- Абсолютное позиционирование
- Блочные элементы
- Использование в вёрстке
- Липкое позиционирование
- Нормальное позиционирование
- Описание float
- Открываем блочную модель
- Относительное позиционирование
- Поток
- Свойства позиционирования
- Событие onclick
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
- Фиксированное позиционирование
Как сделать строку таблицы ссылкой?
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |