Скрытие столбцов в таблице
Можете назначить ячейкам классы и по ним скрывать. А в чекбоксах хранить названия этих классов.
Лучше отслеживать событие ‘change’ для чекбоксов. И использовать CSS для скрытия колонки.
const controls = document.getElementById('controls'); controls.addEventListener('change', e => < toggleColumn(e.target.dataset.columnClass); >); function toggleColumn(columnClass) < const cells = document.querySelectorAll(`.$`); cells.forEach(cell => < cell.classList.toggle('hidden'); >); >.hidden
| Цена | Комментарий |
|---|---|
| 200 | БУ |
| 500 | Новый |
Как скрыть таблицу html
Для скрытия таблицы HTML можно использовать CSS свойство display и задать ему значение none . Это свойство скрывает элемент и не оставляет на его месте зазоров и пустот.
id="myTable"> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 #myTable display: none; > Также можно использовать JavaScript для скрытия таблицы. Для этого нужно получить доступ к элементу таблицы и задать ему свойство style.display со значением none .
id="myTable"> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 onclick="hideTable()">Скрыть таблицу function hideTable() document.getElementById('myTable').style.display = 'none'; > Скрыть (показать) ячейку таблицы
Здравствуйте!
Уже второй вечер не могу решить простую задачу:
Нужно при определенном условии сделать ячейку таблицы (id=label) с размещенным в ней объектом (button) невидимой.
Пытаюсь сделать следующим образом:
1 2 3 4
function hide() { document.getElementById('label').style.display ='none'; }
1 2 3
td id=label> div id="button"/div> /td>
Почему-то такая конструкция отказывается работать. Что не так?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как скрыть/показать строку таблицы
Голову сломал уже..не могу найти решение. Нужно, чтобы при нажатии на кнопку в статичной таблице.
Блок div скрыть/показать при нажатии на кнопку «показать все»
Добрый день. На странице.
Показать / Скрыть
Здравствуйте! помогите сделать скрипт показать скрыть по клику, как показано на фото. Заранее.
JS показать/скрыть элементы
Почему открывает блок menu сперва после второго клика, а потом нормально работает, по клику -.
1846 / 1342 / 599
Регистрация: 12.01.2011
Сообщений: 5,432
1 2 3 4 5 6 7 8 9 10 11
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';
Регистрация: 24.04.2016
Сообщений: 35
К сожалению, не работает
А почему
document.getElementById('button').parentElement.style.display = 'none';
document.getElementById('label').parentElement.style.display = 'none';
Ведь нужно скрыть ячейку с объектом, а не сам объект.
супермизантроп
3940 / 2978 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
Сообщение от Foxconn 
Что не так?
по определению таблица — это N строк, в каждой из которых имеется ровно M ячеек
вы возжелали в одной из строк сделать M-1 ячейку — а это уже не таблица, таблиц «с дыркой внутри» не бывает
Регистрация: 24.04.2016
Сообщений: 35
Хорошо, давайте рассмотрим пример. Имеется таблица 2 строки по 4 ячейки. В первом случае (рис.1) для первой ячейки пишем:
td id="label" style="display:block">
во втором случае (рис.2):
td id="label" style="display:none">
Тоже ведь, получается «дырка» в таблице? Но все работает! Тогда почему из скрипта невозможно присвоить ячейке label значение style.display =’none’
3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
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
Кстати, как вариант.. заключить таблицу в див и скрывать его через аттрибут display.
Вот список элементов поддерживающих visibility
A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, hn, HR, HTML, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OBJECT, OL, P, PRE, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP