Microclimate.su

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

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

Строки таблицы

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

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

Рис. 1. Таблица со строками, выделенными с помощью линий

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

Пример 1. Разделение строк таблицы линиями

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

Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.

Рис. 2. Таблица со строками, выделенными с помощью цвета и линий

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

Читать еще:  Ссылка на электронную почту html
. Заметьте, что для селектора TR можно задавать только цвет фона через свойство background . Всякие линии, которые установлены для селектора TR , отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору TD (пример 2).

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

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

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.

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

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

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

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

Читать еще:  Html в xml

Я действительно новичок в этом, поэтому, пожалуйста, попробуйте объяснить это любым способом. Также я пробовал 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 видимость указанного элемента (ов).

Читать еще:  Vpn и прокси

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

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

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

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

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

и

к вашей разметке, чтобы упростить скрытие строк данных и игнорировать строки заголовков.

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

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

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

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

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

Ссылка на основную публикацию
ВсеИнструменты 220 Вольт
Adblock
detector
×
×