Показать/скрыть столбцы таблицы 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 # столбцов?

Update

Вот что я придумал, отлично работает и очень быстро. Сообщите мне, можете ли вы подумать о способах улучшения.

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>

Ответы

Ответ 1

Нет, это в значительной степени. Теоретически вы можете использовать visibility: collapse для некоторых <col> s, но поддержка браузера там не все.

Чтобы улучшить то, что у вас есть, вы можете использовать table-layout: fixed в <table>, чтобы браузер использовал более простой, быстрый и предсказуемый алгоритм фиксированной таблицы. Вы также можете отказаться от правил .show, как если ячейка не была сделана display: none по правилу .hide, она будет автоматически display: table-cell. Разрешить отображение таблицы возвращаться к умолчанию, а не устанавливать его явно избегает проблем в IE и 8, где значения отображения таблицы не поддерживаются.

Ответ 2

Одна строка кода с использованием jQuery:

$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

Источник: Скрыть столбец таблицы с помощью одной строки кода jQuery

Ответ 3

Если вы ищете простой столбец, вы можете использовать селектор: nth-child.

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) {
    display: none;
}

Я использую это с тегом @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<a.length; i++) {
      if (a[i] == string) {
          return;
          }
      }
  s += " " + string;
  }
else {
    s = "";
    for (var i=0; i<a.length; i++) {
        if (a[i] != string)
            s += a[i] + " "; 
        }
    }
elem.className = s;
}