Показать/скрыть столбцы таблицы HTML с помощью CSS ⇐ CSS

[Anonymous]

Я хочу отобразить базовую таблицу HTML с элементами управления для отображения/скрытия дополнительных столбцов:



Column 1
1a
1b
Column 2
2a
2b


100
40
60
200
110
90




Таким образом, столбцы 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию, но когда вы нажимаете на столбец 1, я хочу, чтобы 1a и 1b переключались, и то же самое со столбцом 2 с 2а и 2б. В конечном итоге у меня может получиться больше столбцов и много строк, поэтому любые подходы к циклированию 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 { display: table-cell; }


А затем настройте вызовы функций onClick для ячеек заголовка таблицы, которые будут вызывать переключение, и определите, какой класс CSS установить для «mytable», чтобы создать эффект переключения. что я ищу. Есть ли простой способ настроить это так, чтобы код работал для n # столбцов?

Обновить

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

CSS

.col1 {display: none; }
.col2 {display: none; }
.col3 {display: none; }

table.show1 .col1 { display: table-cell; }
table.show2 .col2 { display: table-cell; }
table.show3 .col3 { display: table-cell; }


Javascript

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;
}
}


И фрагмент HTML:



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




Подробнее здесь: https://stackoverflow.com/questions/285 ... -using-css