покажите/скройте столбцы таблицы HTML с помощью CSS

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

<table id="mytable">
    <tr>
        <th>Column 1</th>
        <th class="col1">1a</th>
        <th class="col1">1b</th>
        <th>Column 2</th>
        <th class="col2">2a</th>
        <th class="col2">2b</th>
    </tr>
    <tr>
        <td>100</td>
        <td class="col1">40</td>
        <td class="col1">60</td>
        <td>200</td>
        <td class="col2">110</td>
        <td class="col2">90</td>
    </tr>
</table>

Таким образом, Столбец 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 { 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:

<table id="mytable">
<tr>
    <th onclick="toggleColumn(1)">Col 1 = A + B + C</th>
    <th class="col1">A</th>
    <th class="col1">B</th>
    <th class="col1">C</th>
    <th onclick="toggleColumn(2)">Col 2 = D + E + F</th>
    <th class="col2">D</th>
    <th class="col2">E</th>
    <th class="col2">F</th>
    <th onclick="toggleColumn(3)">Col 3 = G + H + I</th>
    <th class="col3">G</th>
    <th class="col3">H</th>
    <th class="col3">I</th>
</tr>
<tr>
    <td>20</td>
    <td class="col1">10</td>
    <td class="col1">10</td>
    <td class="col1">0</td>
    <td>20</td>
    <td class="col2">10</td>
    <td class="col2">8</td>
    <td class="col2">2</td>
    <td>20</td>
    <td class="col3">10</td>
    <td class="col3">8</td>
    <td class="col3">2</td>
</tr>
</table>