показать / скрыть столбцы HTML-таблицы с помощью CSS
Я хочу отобразить базовую таблицу html с элементами управления для переключения/скрытия дополнительных столбцов:
Column 1 1a 1b Column 2 2a 2b 100 40 60 200 110 90
Итак, столбец 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию, но когда вы нажимаете на столбец 1, я хочу, чтобы 1a и 1b переключались, а также с столбцом 2 с 2a и 2b. У меня может быть больше столбцов и много строк, поэтому любые подходы к циклу javascript были слишком медленными, чтобы работать, когда я тестировал. Единственный подход, который кажется достаточно быстрым, состоит в том, чтобы настроить некоторые css следующим образом:
table.hide1 .col1 < display: none; >table.hide2 .col2 < display: none; >table.hide3 .col3 < display: none; >table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3
И затем настройте вызовы функции onClick на ячейках заголовка таблицы, которые вызовут переключатель, и определите, какой класс css для установки «mytable» на это создаст эффект переключения, который я ищу. Есть ли простой способ установить это, чтобы код мог работать для n # столбцов?
Update
Вот что я придумал, отлично работает и очень быстро. Сообщите мне, можете ли вы подумать о способах улучшения. CSS
.col1 .col2 .col3 table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3
function toggleColumn(n) < var currentClass = document.getElementById("mytable").className; if (currentClass.indexOf("show"+n) != -1) < document.getElementById("mytable").className = currentClass.replace("show"+n, ""); >else < document.getElementById("mytable").className += " " + "show"+n; >> Col 1 = A + B + C A B C Col 2 = D + E + F D E F Col 3 = G + H + I G H I 20 10 10 0 20 10 8 2 20 10 8 2
Итак, кажется, нет другого способа сделать это — но есть ли способ сделать это, так что это «липкое» переключение? Прямо сейчас, каждый раз, когда я показываю один столбец, другой отображаемый столбец переходит в состояние скрытия. Я думаю, я должен добавить правила CSS, чтобы конкретно обрабатывать каждую перестановку . Я надеюсь, что нет . не будет весело, если я имею дело с 5 столбцами показать / скрыть.
Хм IE7 не нравится решение, которое я отправил. Я могу заставить его работать со всеми столбцами, показанными по умолчанию, но не со скрытием по умолчанию .
Вы можете добавить несколько классов: table.className= ‘show1 show3’ и т. Д. Я подозреваю, что проблема IE заключается в том, что, как я уже говорил, он не поддерживает display: table-cell . Я бы использовал классы вроде hide вместо show , поэтому вам нужно только объявить table.hide1 col1 < display: none; >
Скрыть (показать) ячейку таблицы
Здравствуйте!
Уже второй вечер не могу решить простую задачу:
Нужно при определенном условии сделать ячейку таблицы (id=label) с размещенным в ней объектом (button) невидимой.
Пытаюсь сделать следующим образом:
function hide() { document.getElementById('label').style.display ='none'; }
td id=label> div id="button"/div> /td>
Как скрыть/показать строку таблицы
Голову сломал уже..не могу найти решение. Нужно, чтобы при нажатии на кнопку в статичной таблице.
Блок div скрыть/показать при нажатии на кнопку «показать все»
Добрый день. На странице.
Показать / Скрыть
Здравствуйте! помогите сделать скрипт показать скрыть по клику, как показано на фото. Заранее.
JS показать/скрыть элементы
Почему открывает блок menu сперва после второго клика, а потом нормально работает, по клику -.
table> tr> td id=label> div id="button">0/div> /td> td>2/td> td>3/td> td>4/td> td>5/td> /tr> /table>
document.getElementById('button').parentElement.style.display = 'none';
document.getElementById('button').parentElement.style.display = 'none';
document.getElementById('label').parentElement.style.display = 'none';
Сообщение от Foxconn 
по определению таблица — это N строк, в каждой из которых имеется ровно M ячеек
вы возжелали в одной из строк сделать M-1 ячейку — а это уже не таблица, таблиц «с дыркой внутри» не бывает
Хорошо, давайте рассмотрим пример. Имеется таблица 2 строки по 4 ячейки. В первом случае (рис.1) для первой ячейки пишем:
td id="label" style="display:block">
td id="label" style="display:none">
Тоже ведь, получается «дырка» в таблице? Но все работает! Тогда почему из скрипта невозможно присвоить ячейке label значение style.display =’none’
Foxconn, все можно, но не нужно. Вы можете назначить display:none ячейке таблицы.
Но назначив этот стиль ячейке, вы поломаете таблицу. Чтобы сохранить структуру таблицы и скрыть ячейку, воспользуйтесь стилем visibility: hidden .
В вашем первом сообщении код не работает, потому что, функция сама себя не вызовет.
В третьем сообщении внимательно посмотрите на код, вы обращаетесь к родителю, а не к самому элементу, поэтому и не срабатывает. Azdeman вам дал код, который прячет ячейку, и этот код работает.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
html lang="en"> head> meta charset="UTF-8" /> title>Documenttitle> style> td{ border:1px solid black; padding:10px; } style> head> body> table> tr> td id="label">1td> td>2td> tr> tr> td>3td> td>4td> tr> table> script> function hide(){ document.getElementById('label').style.visibility = 'hidden'; } hide(); script> body> html> Как скрыть столбцы в таблице HTML?
Я создал таблицу в ASPX. Я хочу скрыть один из столбцов на основе требования, но в здании таблицы HTML нет атрибута типа visible . Как я могу решить свою проблему?
8 ответов
@office302 office302 Применять этот стиль только для первого тд? Или вы хотите использовать только CSS — это можно сделать примерно так td:first-child < display:none; >
@Anuraj следует отметить, что: поддерживаются первый ребенок и т. Д.> IE 11 и Edge, в любом случае, хороший
Вы можете использовать селектор nth-child CSS, чтобы скрыть целый столбец:
Это работает в предположении, что ячейка столбца N (будь то a th или td ) всегда является N-м дочерним элементом своей строки.
Если вы хотите, чтобы номер столбца был динамическим, вы можете сделать это с помощью querySelectorAll или любой структуры, представляющей аналогичную функциональность, например jQuery здесь:
$('#myTable tr > *:nth-child(2)').hide(); @RickSmith Хороший вопрос. Обновил мой пост, чтобы избежать проблемы другим способом (используя дочерний селектор).
вы также можете использовать:
Разница между ними, которая «скрыта» скрывает ячейку, но она удерживает пробел, но с «коллапсом» пространство не удерживается, как отображение: none. Это важно при удалении целого столбца или строки.
Я обнаружил, что для тегов div коллапс также будет занимать место. Для тегов div вы должны использовать display: none; для того, чтобы действительно развалиться и не удерживать пространство.
visibility: collapse разработан специально для обработки показа / скрытия ячеек, поскольку при пересчете ширины / высоты ячейки между ними и display:none существует разница display:none . См. Developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Кос ответ почти прав, но может иметь повреждающие побочные эффекты. Это вернее:
#myTable tr td:nth-child(1), #myTable th:nth-child(1)
CSS (каскадные таблицы стилей) будут атрибутами каскад для всех его дочерних элементов. Это означает, что *:nth-child(1) скроет первый td каждого tr И скрыть первый элемент всех детей td . Если у любого из ваших td есть вещи, такие как кнопки, значки, входы или выделения, первый будет скрыт (woops!).
Даже если у вас в настоящее время нет вещей, которые будут скрыты, отразите свое разочарование в будущем, если вам нужно добавить его. Не наказывайте свое будущее, подобное тому, что будет больно отлаживать!
Мой ответ только скроет первые td и th на всех tr в #myTable , сохраняя ваши другие элементы в безопасности.
Показать/скрыть столбцы таблицы html с помощью css
Я хочу отобразить базовую таблицу html с элементами управления для переключения/скрытия дополнительных столбцов:
Column 1 1a 1b Column 2 2a 2b 100 40 60 200 110 90
Итак, столбец 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию, но когда вы нажимаете на столбец 1, я хочу, чтобы 1a и 1b переключались, а также с столбцом 2 с 2a и 2b. У меня может быть больше столбцов и много строк, поэтому любые подходы к циклу javascript были слишком медленными, чтобы работать, когда я тестировал.
Единственный подход, который кажется достаточно быстрым, состоит в том, чтобы настроить некоторые css следующим образом:
table.hide1 .col1 < display: none; >table.hide2 .col2 < display: none; >table.hide3 .col3 < display: none; >table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3
И затем настройте вызовы функции onClick на ячейках заголовка таблицы, которые вызовут переключатель, и определите, какой класс css для установки «mytable» на это создаст эффект переключения, который я ищу. Есть ли простой способ установить это, чтобы код мог работать для n # столбцов?
Update
Вот что я придумал, отлично работает и очень быстро. Сообщите мне, можете ли вы подумать о способах улучшения.
.col1 .col2 .col3 table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3
function toggleColumn(n) < var currentClass = document.getElementById("mytable").className; if (currentClass.indexOf("show"+n) != -1) < document.getElementById("mytable").className = currentClass.replace("show"+n, ""); >else < document.getElementById("mytable").className += " " + "show"+n; >> Col 1 = A + B + C A B C Col 2 = D + E + F D E F Col 3 = G + H + I G H I 20 10 10 0 20 10 8 2 20 10 8 2
ОТВЕТЫ
Ответ 1
Нет, это в значительной степени. Теоретически вы можете использовать visibility: collapse для некоторых s, но поддержка браузера там не все.
Ответ 2
Одна строка кода с использованием jQuery:
$('td:nth-child(2)').hide(); // If your table has header(th), use this: //$('td:nth-child(2),th:nth-child(2)').hide(); Ответ 3
Если вы ищете простой столбец, вы можете использовать селектор: nth-child.
#tableid tr td:nth-child(3), #tableid tr th:nth-child(3)
Я использую это с тегом @media иногда, чтобы сконденсировать более широкие таблицы, когда экран слишком узкий.
Ответ 4
Я не думаю, что есть что-то, что вы можете сделать, чтобы избежать того, что вы уже делаете, однако, если вы создаете таблицу на клиенте с помощью javascript, вы всегда можете добавлять правила стиля динамически, поэтому вы можете разрешить любое количество столбцов без загромождения вашего файла css со всеми этими правилами. См. http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript, если вы не знаете, как это сделать.
Изменить: Для вашего «липкого» переключения вы должны просто добавлять имена классов, а не заменять их. Например, вы можете присвоить ему имя класса «hide2 hide3» и т.д. Я не думаю, что вам действительно нужны классы «show», поскольку это было бы по умолчанию. Библиотеки, такие как jQuery, делают это легко, но в отсутствие, такая функция может помочь:
var modifyClassName = function (elem, add, string) < var s = (elem.className) ? elem.className : ""; var a = s.split(" "); if (add) < for (var i=0; i> s += " " + string; > else < s = ""; for (var i=0; i> elem.className = s; >