Html скрыть строку таблицы
Строки таблицы
При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой — либо с помощью линий, либо за счет добавления фонового цвета.
Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.
Рис. 1. Таблица со строками, выделенными с помощью линий
Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).
Пример 1. Разделение строк таблицы линиями
В данном примере вертикальные линии между ячейками заголовка добавляются за счет стилевого свойства border , которое используется для селектора TH . При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.
Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.
Рис. 2. Таблица со строками, выделенными с помощью цвета и линий
Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even , и станем добавлять его к четным строкам таблицы, а именно к тегу
Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.
Пример 2. Выделение строк таблицы цветом
В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.
Показать/скрыть строки таблицы, используя классы 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 позволяет отображать и скрывать строку:
Загрузка...
detector