Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html скрыть строку таблицы

Показать/скрыть строки таблицы, используя классы Javascript

У меня есть таблица, которая расширяет и сворачивает, но она становится слишком запутанной, чтобы использовать ее, а IE и Firefox не работают должным образом.

Итак, вот код JavaScript:

Проблема в том, что я использую один ID для каждого и очень раздражающий, потому что я хочу иметь много скрытых строк для каждого родителя и большого количества родителей, поэтому для обработки будет слишком много идентификаторов. И IE и FireFox показывают только первую скрытую строку, а не другие. Я подозреваю, что это происходит, потому что я сделал это, запуская все идентификаторы вместе. Я думаю, было бы лучше, если бы я использовал классы вместо идентификаторов, чтобы индексировать скрытые строки.

Я действительно новичок в этом, поэтому, пожалуйста, попробуйте объяснить это любым способом. Также я пробовал jQuery, но не смог его получить.

javascript html-table expand

6 ответов

13 Решение Taylan Aydinli [2013-11-05 23:18:00]

Трудно понять, что вы пытаетесь сделать с этим образцом, но на самом деле вы на правильном пути, думая об использовании классов. Я создал JSFiddle, чтобы продемонстрировать немного лучший способ (я надеюсь) сделать это.

Что вы делаете, вместо работы с идентификаторами вы работаете с классами. В вашем примере кода есть апельсины и яблоки. Я рассматриваю их как категории продуктов (так как я действительно не знаю, какова ваша цель), с их собственными идентификаторами. Итак, я отмечаю продукт

Я также отмечаю ссылки с простым классом .toggler . Неправильная практика иметь атрибуты onclick для самих элементов. Вы должны «связывать» события с загрузкой страницы с помощью JavaScript. Я делаю это с помощью jQuery.

В этом формате вы привязываете обработчик событий к событию click ссылок с классом toggler . В моем коде я добавляю атрибут data-prod-cat к ссылкам toggler , чтобы указать, какие строки продуктов они должны контролировать. (Причина моего использования атрибута data-* объясняется здесь. Для получения дополнительной информации вы можете использовать атрибуты данных «html5» Google.)

В обработчике событий я делаю следующее:

С помощью этого кода я на самом деле пытаюсь создать селектор типа $(‘.cat1’) , чтобы я мог выбирать строки для определенной категории продуктов и изменять их видимость. Я использую $(this).attr(‘data-prod-cat’) для доступа к атрибуту data-prod-cat ссылки, которую пользователь нажимает. Я использую функцию jQuery toggle, поэтому мне не нужно писать такую ​​логику, как if visible, then hide element, else make it visible , как в вашем JS-коде. jQuery занимается этим. Функция переключения делает то, что она говорит, и toggle видимость указанного элемента (ов).

Надеюсь, это было достаточно объяснительным.

4 nnnnnn [2013-11-05 23:19:00]

Ну, один способ сделать это — просто поместить класс в «родительские» строки и удалить все идентификаторы ids и inline onclick :

И затем у вас есть CSS, который скрывает всех не-родителей:

Это значительно упрощает ваш html. Обратите внимание, что я добавил

С помощью jQuery вы можете просто сделать это:

Или, чтобы реализовать что-то подобное в простом JavaScript, возможно, что-то вроде следующего:

В любом случае, поместите JavaScript в элемент

Просто вызывать функцию showhiderow() при событии радиообмена onClick

AngularJS директивы ng-show, ng-hide позволяет отображать и скрывать строку:

1.7. HTML-таблицы

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

Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.

Для всех элементов таблицы доступны ‎глобальные атрибуты, а также собственные атрибуты.

Создание таблиц в HTML

  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы и
  • 7. Группировка разделов таблицы
Читать еще:  Яндекс переводчик html

1. Как создать таблицу

Таблица создаётся при помощи парного тега

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :

Промежутки между ячейками таблицы убираются с помощью свойства table .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега

3. Как сделать ячейку заголовка столбца таблицы

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

5. Как добавить подпись (заголовок) к таблице

Элемент создает подпись таблицы. Добавляется непосредственно после тега

6. Группирование строк и столбцов таблицы

Элемент создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов

Элемент формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента . С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента доступен атрибут span , задающий количество столбцов для объединения.

Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и

7. Группировка разделов таблицы

Элемент должен быть использован в следующем порядке: как дочерний элемент

Элемент создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

1.7. HTML-таблицы

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

Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.

Для всех элементов таблицы доступны ‎глобальные атрибуты, а также собственные атрибуты.

Создание таблиц в HTML

  • Содержание:
  • 1. Как создать таблицу
  • 2. Как создать строки (ряды) таблицы
  • 3. Как сделать ячейку заголовка столбца таблицы
  • 4. Как сделать ячейку тела таблицы
  • 5. Как добавить подпись (заголовок) к таблице
  • 6. Группирование строк и столбцов таблицы и
  • 7. Группировка разделов таблицы

1. Как создать таблицу

Таблица создаётся при помощи парного тега

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :

Промежутки между ячейками таблицы убираются с помощью свойства table .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега

3. Как сделать ячейку заголовка столбца таблицы

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

5. Как добавить подпись (заголовок) к таблице

Элемент создает подпись таблицы. Добавляется непосредственно после тега

6. Группирование строк и столбцов таблицы

Элемент создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов

Элемент формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента . С помощью атрибута style можно изменить основной цвет фона ячеек. Для элемента доступен атрибут span , задающий количество столбцов для объединения.

Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и

7. Группировка разделов таблицы

Элемент должен быть использован в следующем порядке: как дочерний элемент

Элемент создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега

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

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

Подсвечивание строк таблицы

Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится.

Начнем с примера

Пример 1. Подсветка строк таблицы при наведении мыши на строку + подсветка последней кликнутой строки.

Поводите мышкой над строками таблицы, покликайте на нескольких строках.

Пример 2. Подсветка по клику нескольких строк, а не только одной как в примере 1 (подсветка при наведении мыши на строку отключена).

Покликайте на нескольких строках.

Пример 3. Подсветка строк таблицы при наведении мыши на строку (подсветка по клику полностью отключена).

Поводите мышкой над строками таблицы.

Взгляд изнутри

Первым делом создаем обычную таблицу, без какой либо подсветки строк. Придаем таблице некий начальный облик с помощью CSS.

Это обычная таблица из 3 строк, по 3 ячейки в строке. Первая ячейка заголовочная и задана тегом TH.

Теперь добавляем функциональность подсветки. В разделе head подключаем библиотеку функций: , а после закрывающегося тега

Рассмотрим подробнее функцию highlightTableRows(), а вернее её аргументы.

Синтаксис: highlightTableRows(tableId, highlightClass, clickClass, multiple)

  • tableId — id таблицы, к которой нужно применить подсвечивание;
  • highlightClass — имя CSS-класса который нужно применить к строке (к тегу TR) при наведении на неё курсора мыши (если передать пустую строку, то подсветки при наведении не будет);
  • clickClass — имя CSS-класса который нужно применить к строке (к тегу TR) при клике на ней (если передать пустую строку, то подсветки по клику не будет);
  • multiple — этот аргумент разрешает или запрещает подсветку по клику нескольких строк, по умолчанию true — подсветка нескольких строк разрешена, если передать значение false, то подсвечиваться будет лишь последняя кликнутая строка.

Примеры:

  • highlightTableRows(«myTable», «className1»); //подсветка только при наведении
  • highlightTableRows(«myTable», «className1», «className2», false); //подсветка при наведении на строку курсора мыши и по клику на строке. Множественная подсветка строк по клику отключена.
  • highlightTableRows(«myTable», «», «className2»); //подсветка только по клику на строке. Множественная подсветка строк по клику разрешена.

Так. У нас есть таблица, библиотека функций, и мы знаем, как инициализировать подсветку. Теперь осталось определить стили, которые будут применяться к ряду при наведении и/или клике.

В итоге документ принимает вид:

И вот что получилось:

. Не забудьте скачать и сохранить у себя библиотеку функций hltable.js

Важно знать

Опера версии ниже 9 испытывает серьезные трудности с применением стилей к таблицам, содержащим разделы THEAD, TFOOT, TBODY.

Поверхностно о реализации

Как вы уже поняли, всю работу выполняет функция highlightTableRows(). Что же она делает? Данная функция назначает таблице обработчики событий: onmouseover и onmouseout для подсветки при наведении мыши на ряд, и onclick для подсветки по клику. Соответственно, когда пользователь наводит курсор на строку, срабатывает функция-обработчик onmouseover, которая добавляет к строке класс с именем, переданным вторым аргументом. При выходе за границы строки срабатывает событие onmouseout, которое отменяет применение к строке класса. Ну и по клику вызывается обработчик onclick, который либо применяет класс, переданный третьим аргументом, к строке, либо отменяет его действие. Также onclick смотрит на аргумент multiple, и если он равен false (запрещено множественное выделение строк по клику), то обработчик отменяет действие класса на строку которая была «кликнута» до этого, а затем применяет класс к новой строке.

Следует подчеркнуть, что обработчики назначаются именно таблице, элементу, соответствующему тегу TABLE, а не строкам или ячейкам, но при этом они (обработчики) срабатывают при возникновении события в строке, что происходит благодаря просачиванию события (event bubbling), когда событие в дочернем элементе запускает обработчики этого события в родительских элементах. Т.е., в нашем случае, событие, возникшее в строке (

Делаем границы для таблицы в HTML

Всем привет! Итак, теперь вы умеете создавать элементарные таблицы, состоящие из такого количества строк и столбцов, которое необходимо. Неплохо, неплохо. А теперь давайте поговорим про оформление этих таблиц.

В прошлом уроке таблицы отображались без границ. И, согласитесь, выглядит так себе, даже и табличкой-то не назовёшь. Чтобы сделать границы таблицы в HTML, следует добавить к тегу

Итак, давайте сделаем границы для таблицы. Например, для уже имеющейся у нас:

Результат в браузере:

Как убрать границы таблицы

В свою очередь, чтобы убрать границы таблицы HTML, или ещё можно сказать, сделать их невидимыми, нужно атрибуту border задать значение . После этих нехитрых действий рамка уберётся.

Атрибут позволяет создать, но не управлять границами. Он позволяет лишь изменять их толщину.

Поэтому, сейчас речь пойдет о CSS, свойства которого делают возможным с помощью border создавать различные границы, как внутри каждой ячейки, так и внешние, вокруг таблицы в целом.

Давайте посмотрим как применять CSS для создания внешних и внутренних границ таблицы.
Для этого удалим у нашей таблицы атрибут border и добавим стили:

Так мы добавили только внешнюю границу для таблицы синего цвета.

Результат в браузере:

Теперь давайте добавим границы и для каждой ячейки. Для этого просто дополним стили:

Результат в браузере:

Как убрать отступы между ячейками в таблице HTML

Согласитесь, что граница, заданная с помощью CSS, имеет не такой внешний вид, как хотелось бы. Бесспорно, с точки зрения эстетики, есть над чем работать. На странице браузера можно увидеть, что по умолчанию он отображает границы таблиц и ячеек раздельно. Пример это явно демонстрирует.

Однако, от таких вот границ, которые именуются двойными, вполне можно избавиться, если использовать CSS-свойство border-collapse. На практике это выглядит вот так:

Как результат — убирается расстояние между ячейками:

Значение collapse, приписанное атрибуту border, позволяет убрать двойные рамки. Как можно увидеть, результатом является «схлопывание» границ ячеек, расположенных рядом, а также рамок ячеек и внешней рамки таблицы. Что касается последней, то она может удалиться и вовсе. И если есть необходимость в ее отображении, необходимо увеличивать ее ширину. Таким образом мы избавились от разделителей в таблице. А в следующем уроке мы поговорим о том, как можно задавать вертикальные и горизонтальные границы. Всем удачи!

Ссылка на основную публикацию
Adblock
detector