Как сделать кнопку в таблице html
Обновлено: 06.07.2024
Как насчет размещения прозрачного элемента перед строкой? Таким образом, он будет иметь все свойства реальной ссылки (строка состояния, средний щелчок и т. Д.), А также не изменит внешний вид таблицы (если это необходимо).
Пожалуйста, посмотрите на другие ответы ниже, особенно те, которые не используют jquery.
Сохранено для потомков, но, безусловно, неправильный подход в 2020 году. (Не был идиоматическим даже в 2017 году)
Вы используете Bootstrap, что означает, что вы используете jQuery: ^), поэтому один из способов сделать это:
Конечно, вам не нужно использовать href или переключать местоположения, вы можете делать все что угодно в функции обработчика кликов. Читайте дальше jQuery и как писать обработчики;
Преимущество использования класса перед id заключается в том, что вы можете применить решение к нескольким строкам:
и ваша база кода не меняется. Один и тот же обработчик позаботится обо всех строках.
Вы можете использовать обратные вызовы Bootstrap jQuery, как это (в document.ready обратном вызове):
Это имеет преимущество в том, что не сбрасывается при сортировке таблиц (что происходит с другой опцией).
Запись
Поскольку это было опубликовано, window.document.location оно устарело (или, по крайней мере, устарело) window.location .
Просто хотел добавить, что вы не должны использовать href атрибут для a tr , так как это недопустимый атрибут для этого элемента. Вместо этого используйте атрибуты данных: data-url="
Вы можете избежать использования класса в каждой строке, и украсить стол с именем класса clickable_row (CamelCase против стандартов HTML и должна быть в нижнем регистре (я имел проблемы с кросс - браузером несколько раз с этим)) , а затем JQuery является $('.clickable_row tr').click(function . Но на самом деле вы должны использовать data- для хранения данных, а не href так как это спецификация для пользовательских данных. data-url и JQuery будет иметь доступ к нему, как $(this).data(url);
К вашему сведению: Если вы можете, вы должны оставить ссылку где-то в tr для людей, у которых отключен Javascript.
Не большой поклонник этого решения, потому что пользователи не видят URL-адрес ссылки в нижней части браузера при наведении курсора и, что более важно, не могут щелкнуть колесо по ссылке, чтобы открыть ее на новой вкладке. Вставка a тега display: block; внутри каждой ячейки немного раздражает, но кажется наиболее подходящим способом решения этой проблемы.
добавить стиль для представления указателя
Работая над этим, вы захотите использовать JavaScript, чтобы назначить обработчик кликов за пределами HTML.
@ Aquillo ОП конкретно заявляет, что он / она использует бутстрап. так что решение jQuery будет лучше в рамках
@AhmedMasud В этом случае да. Хотя для любого будущего читателя простой JS может быть лучшим решением. Поскольку в этом и заключается цель Stackoverflow, я все же считаю свой комментарий правильным.
Разделение поведения и разметки, безусловно, предпочтительнее. Во всяком случае, я бы сказал, что href не является допустимым атрибутом tr. Его следует заменить на data-href и заменить $ (this) .attr на $ (this) .data.
Или вы можете сделать так, чтобы подход привязки событий класса ".clickableRow" выглядел первым внутри строки, по которой щелкали. (это также изящно
Затем вы можете использовать display:block; привязки, чтобы сделать весь ряд кликабельным.
Это, вероятно, примерно так же оптимально, как вы собираетесь получить, если вы не прибегаете к JavaScript.
Это лучшее решение, нет jquery, нет javascript, только CSS, т.е. моя ссылка может отличаться от href, с несколькими параметрами, такими как , поэтому я сохраняю это и изменяю только стиль. Большое спасибо.
Большой! Это решение позволяет открыть ссылку в новой вкладке, если пользователь хочет. Но пустые столбцы не будут иметь ссылок.
@AnnaRouben Я собираюсь не согласиться: наличие нескольких похожих ссылок является очень небольшим недостатком по сравнению с преимуществами (работает без JS, программа чтения с экрана может прочитать, куда ведет ссылка, может щелкнуть по клавише Ctrl, чтобы открыть ее на новой вкладке. ..) Решения Pure-HTML работают почти всегда лучше в вспомогательном программном обеспечении, чем решения JS.
Мне нравится это решение, потому что оно доступно. Пользователи могут переходить по ссылкам, плюс вы можете открывать ссылки в новых вкладках. То, что я сделал в своем приложении, помещено tabindex="-1" на всеЭтот код должен сделать свое дело:
Это правильный ответ IMHO, потому что он сохраняет все инструменты пользовательского агента, связанные со ссылками: поиск (например, / ключ в Firefox), навигация ( tab ключ), Копировать расположение ссылки, Открыть в новой вкладке / окне и т. Д. Даже для доступных / специальных нужны браузеры. Моя единственная придирка в том, что я не буду вкладывать
Применение сторонних плагинов и библиотек к таким таблицам CSS может потребовать немного больше работы, но обычно это копирование, вставка и замена. Например, я просто продублировал собственный Bootstrap _tables.scss и несколько других случайных фрагментов, заменив все вхождения элементов таблицы выбранными классами CSS (которые просто совпадают с элементами: th → .th ) Не так много работы по сравнению с преимуществами, на самом деле ,
Хороший ответ, но это только решение, если таблица была просто использована для правильного выравнивания (что имеет место во многих ситуациях!). Для табличных данных семантикаХотя это очень умный обходной путь, это просто так. На самом деле это не таблица, и, как упоминает автор, это создаст проблемы с доступностью. Это очень вероятно вызовет проблемы с другими вещами, которые ожидают стол, но получают тот.
Достигается с помощью стандартного Bootstrap 4.3+ следующим образом - не требуется jQuery и никаких дополнительных классов CSS!
Вы можете определить содержащий блок по-разному, например, настройка transform значение not not none (как в примере выше).
Для получения дополнительной информации прочитайте вот документацию по Bootstrap stretched-link .
Этот ответ заслуживает большего голосования. Нет JavaScript вообще. И для чего это scope="row" ? Я не использую область действия, и строка все еще ведет себя как ссылка.
@ChristhoferNatalius спасибо! Мой оригинальный ответ не содержал scope="row" - пожалуйста, проверьте историю, если вы хотите увидеть, что еще, возможно, было отредактировано. Однако я не отменил изменения, так как фрагмент кода, кажется, работает (как и оригинал), и у меня не было возможности полностью протестировать новый код :-)
Недостатком этого является то, что ссылка будет сверху столбцов, вы не сможете скопировать текст, а атрибут title в td не будет отображаться при наведении мышью. Так что, к сожалению, я должен вернуться к старому, поставить ссылку только на один столбец.
Гораздо более гибким решением является нацеливание чего-либо с помощью атрибута data-href. Это можно было легко использовать код в разных местах.
Затем в вашем jQuery просто укажите любой элемент с этим атрибутом:
И не забудьте оформить свой CSS:
Теперь вы можете добавить атрибут data-href к любому элементу, и он будет работать. Когда я пишу такие фрагменты, мне нравится, чтобы они были гибкими. Не стесняйтесь добавлять решение Vanilla JS к этому, если у вас есть.
Вы можете использовать этот компонент начальной загрузки:
Недостающие компоненты для вашего любимого интерфейса.
Через атрибуты данных
Через JavaScript
Вызовите маску ввода через JavaScript:
PPS: теперь вся ваша строка будет кликабельной, и вы можете использовать эту ссылку, чтобы открыть ее и на новой вкладке (Ctrl / CMD + клик)
Вы можете использовать javascript-метод onclick в tr и сделать его кликабельным, также если вам нужно создать ссылку из-за некоторых деталей, вы можете объявить функцию в javascript и вызвать ее в onclick, передавая некоторые значения.
Вот способ размещения прозрачного элемента A над строками таблицы. Преимущества:
- является реальным элементом ссылки: при наведении курсора изменяет указатель, показывает целевую ссылку в строке состояния, может перемещаться по клавиатуре, может быть открыт в новой вкладке или окне, URL-адрес может быть скопирован и т. д.
- таблица выглядит так же, как и без ссылки
- никаких изменений в самом коде таблицы
- Размер элемента A должен быть установлен в скрипте как при создании, так и после любых изменений размера строки, которую он охватывает (в противном случае это может быть сделано вообще без JavaScript, что по-прежнему возможно, если также установлен размер таблицы). в HTML или CSS)
Стол остается как есть:
Добавьте ссылки (для каждой строки) с помощью jQuery JavaScript, вставив элемент A в каждый первый столбец и установив необходимые свойства:
Настройка ширины и высоты может быть сложной, если используется много отступов и полей, но, как правило, несколько пикселей не должны иметь значения.
Умное решение. Я обнаружил, что создание элемента лениво, только после перемещения строки, принесло огромный прирост производительности для больших таблиц.
Вы можете добавить роль кнопки в строку таблицы, и Bootstrap изменит курсор без каких-либо изменений CSS. Я решил использовать эту роль как способ легко сделать любую строку кликабельной с очень небольшим количеством кода.
Вы можете применить этот же принцип, чтобы добавить роль кнопки к любому тегу.
вау, это на самом деле работает с ui-sref вместо data-href без кода jquery. нужно просто поменять курсор на палец.
Вот простое решение ..
Этот код ниже сделает всю вашу таблицу кликабельной. Если щелкнуть ссылки в этом примере, в диалоговом окне с предупреждением будет показана ссылка, а не ссылка.
HTML:
Вот HTML за приведенным выше примером:
CSS
JQuery
И, наконец, jQuery, благодаря которому происходит волшебство:
Что происходит, когда щелкают по строке, выполняется поиск href, принадлежащего привязке. Если он найден, местоположение окна устанавливается на этот href.
Очень простой вариант - просто использовать по щелчку, и, на мой взгляд, более корректно, потому что это разделяет представление и контроллер, и вам не нужно жестко кодировать URL или делать то, что вам нужно сделать с помощью щелчка. , Работает и с Angular ng-click тоже.
Конечно, это правильный ответ. Другие безумно сложны для такой простой вещи. Если вы хотите изменить указатель мыши, вы можете добавить tr: hover
@TomClose В зависимости от того, что вы хотите, чтобы щелчок строки выполнялся, это может быть проблематично, например, навигация не будет работать нормально - нет щелчков при открытии в новой вкладке / окне, нет указателя мыши, чтобы увидеть пункт назначения и т. Д.
Затем вам нужно указать ширину, используя, например, jQuery:
Я знаю, что кто-то уже написал примерно то же самое, однако мой путь - правильный (div не может быть дочерним для A), а также лучше использовать классы.
Вы можете имитировать таблицу с помощью CSS и сделать элемент A строкой
я бы предпочел использовать onclick="" атрибут, так как он прост в использовании и понятен для новичка, как
Принятый ответ великолепен, но я предлагаю небольшую альтернативу, если вы не хотите повторять URL-адрес для каждого запроса. Таким образом, вы помещаете url или href в таблицу data-url, а не в tr.
Это выглядит довольно элегантно. НО демо гугл ссылки не работает. Stackoverflow один делает. Вероятно, просто Google, как ослы, как они часто. Может быть, ссылка на Bing :-) Обслуживает их правильно. Во всяком случае, в хорошем и аккуратном решении.
Это работает мне !! Хорошее решение. Следует отметить, что ширина a: before должна быть достаточно длинной, чтобы покрыть таблицу.
Хотя основное решение здесь великолепно, мое решение устраняет необходимость в занятиях. Все, что вам нужно сделать, это добавить атрибут data-href с URL-адресом.
Я потратил много времени, пытаясь решить эту проблему.
Используйте JavaScript. Очевидные недостатки: невозможно открыть новую вкладку изначально, и при наведении курсора на строку в строке состояния не будет индикации, как у обычных ссылок. Доступность тоже вопрос.
Я нашел 3 других способа реализации этого подхода. Первый в порядке, два других не велики.
Это работает, но из-за несоответствий между Chrome и Firefox требуется специальный взлом для браузера, чтобы преодолеть различия. Кроме того, Chrome всегда выравнивает содержимое ячейки сверху, что может вызвать проблемы с длинными текстами, особенно если речь идет о разной высоте строки.
Би 2. < display: contents; >все еще экспериментальный; в частности это не поддерживается на Edge.
Последний подход, о котором я рекомендую серьезно подумать, это вообще не использовать кликабельные строки . Кликабельные строки не очень удобны в UX: визуально пометить их как кликабельные нелегко, и возникают проблемы, когда в строках, например, кнопках, можно нажимать несколько частей. Таким образом, жизнеспособной альтернативой может быть наличие тега только в первом столбце, отображаемого в виде обычной ссылки, и предоставление ему роли навигации по всей строке.
Я хочу сделать два столбца моей HTML-таблицы похожими на кнопку раскрывающегося списка. Я пробовал, но все строки были преобразованы в раскрывающуюся кнопку. Я хочу, чтобы в моей таблице отображались только определенные столбцы, это categorycode и categoryname
Выпадающая кнопка загружается, но я не знаю, почему раскрывающийся список не заполняется. У меня также есть тег ul , но он не отображается, я не знаю, где я ошибаюсь, пожалуйста, помогите мне кто-нибудь здесь
Ответы 2
Вы можете попробовать это: (Не тестировал, просто пришло в голову)
Пожалуйста, попробуйте приведенный выше код. Я добавляю динамический идентификатор при создании строк. ранее событие щелчка не происходило, потому что все ячейки имеют один и тот же класс, и вы не повторяете цикл, по которому щелкнули ячейку. На основе динамических идентификаторов будет запущено событие, и отобразится раскрывающийся список.
эй, я пробовал ваш код, но столкнулся с проблемой при получении данных через ajax
Дайте знать, подробно о выпуске. Я запустил код, и он работает, и вы поделились подробностями, чтобы показать их в раскрывающемся списке. Поделитесь подробностями, чтобы я помогал вам
да, он работает нормально, но когда я использую последнюю загрузку и получаю данные с помощью вызова ajax, он показывает ошибку, такую как TypeError: t is null; can't access its "setAttribute" property
Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.
Для создания заголовка столбца используется тег (от англ. table head — заголовок таблицы).
Все это немного запутано, правда? Давайте разбираться на примере.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Таблица по центру
Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.
Размер таблицы
Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.
При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Размер шрифта
Размер шрифта в таблице можно измять двумя способами. Наверное вы уже догадались какими.
С помощью HTML-кода можно изменять размер и начертание текста во всей таблице, но я рекомендую делать это с помощью CSS. А с помощью HTML менять шрифт в отдельных частях. Давайте изменим шрифт с помощью тега в отдельной ячейке.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.
Выравнивание текста
Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.
Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.
Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;
Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:
- top — по верхнему краю.
- middle — по середине.
- bottom — по нижнему краю.
- baseline — по базовой линии.
Отступы в таблице
Текст может располагаться довольно близко к границам таблицы, что затрудняет чтение. Для решения этой проблемы нужно увеличить отступы в таблице.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td .
Объединение ячеек
Довольно важный момент в HTML-таблицах это объединение ячеек.
Объединение может быть горизонтальным.
Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.
| ФИО | Должность |
|---|---|
| Руководящий состав: | |
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Главный бухгалтер |
Оформление HTML-таблиц
Под оформлением таблиц я имею ввиду следующие манипуляции:
- Изменить цвет фона.
- Изменить цвет ячейки (или строк).
- Картинки в таблице (в том числе с прозрачностью).
- Кнопки и элементы управления в таблице.
- Скролл (прокрутка) содержимого таблицы.
Изменение цвета фона таблицы
Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.
Изменить цвет ячейки (или строк)
Цвет строки или ячейки изменятся с помощью того же атрибута. Для меня удобно менять цвет фона строки в больших таблицах – тогда визуально таблица воспринимается гораздо лучше.
Картинки в ячейке
Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.
Итак, изображение вставляется стандартным способом с помощью тега . Подробнее вы можете почитать тут.
А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.
Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.
Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).
Кнопки и элементы управления
Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.
Скролл или прокрутка таблицы
Бывают ситуации когда таблицу необходимо сделать фиксированных размеров, но при этом должна быть возможность прокрутки таблицы. Разберемся как это сделать на примере.
Думаю что если вы дочитали до конца, то вы сможете разобраться как это реализовано. На этом с HTML-таблицами все. Задавайте ваши вопросы в комментариях.
Генератор HTML-таблиц
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.
2 комментариев к записи “ Таблицы HTML ”
Добрый день! Анатолий, скажите пожалуйста «как позиционировать таблицу к правой части страницы. Или вообще расположить две независимые таблицы — одну справа, а другую — слева.
Юрий здравствуйте. Тут есть несколько вариантов, все зависит от более конкретных целей.
Первый самый простой вариант – создаете таблицу, состоящую из двух ячеек. Убираете границы и по сути вы разделили экран на правую и левую часть. Далее в ячейках создаете вложенные таблицы.
Второй вариант. Что бы таблица была справа у нее должен быть ограниченная ширина. Создаете таблицу . align="right" говорит о том, что таблица будет справа, а остальное содержимое, например текст, будет расположен слева (если нет других, препятствующих стилей).
Так как добавить HTML-кнопку на сайт можно разными способами, у многих с этим возникают трудности. Допустимо использовать специальные теги, такие как , , . Можно к кнопкам прикручивать ссылки, чтобы они вели на нужные вам страницы.
А можно поступить еще проще — воспользоваться готовыми виджетами. Мультикнопка будет уместна практически в любых целях — от отправки заявок до покупки билетов и перехода на заданные страницы. Какой способ добавления кнопки на сайт выберите вы?
3 способа добавить HTML-кнопку на сайт
Рассмотрим, как добавить HTML-кнопку на сайт разными способами:
- используя тег& ; ;
- используя тег& ; ;
- устанавливая ссылку (тег& ; ) и с помощью CSS-свойств.
Добавление HTML-кнопки на сайт с помощью тега
Различают две разновидности кнопок, для создания которых используется тег& ;button. Это элемент интерфейса для очистки полей форм — reset, а также кнопка, функционал которой определяет соответствующий скрипт.
HTML-кнопку& ; & ;нельзя считать ссылкой. Чтобы установить переход с этого элемента на нужную страницу, применяется тег& ; (кнопке можно придать определенный стиль, используя таблицы стилей CSS).
С помощью элемента интерфейса& ; или тега& ; можно осуществлять отправку форм HTML. В этом случае нужна кнопка типа& ;submit, которая включена в тег HTML-кода формы& ;
Собирайте до 47 заявок
в день с сайта уже через 9 минут
Бесплатно установим конверсионные виджеты на сайт
и дадим бесплатный доступ на 7 дней. Заявки гарантируем :)
Собирайте до 47 заявок в день
с сайта, уже через 9 минут
Установите за пару кликов и протестируйте на своём
сайте бесплатно в течение 7 дней. Заявки гарантируем :)
Читайте также: