web-dev-qa-db-ja.com

CSSを使用してHTMLテーブルの列を表示/非表示

追加の列の表示/非表示を切り替えるコントロールを持つ基本的な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を切り替えて、2aと2bの列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関数呼び出しを設定し、「mytable」に設定するCSSクラスを決定して、探しているトグルエフェクトを作成します。コードを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>
javascripthtmlcsshtml-table
36
Art Peterson

いいえ、それだけです。理論的には、いくつかのvisibility: collapse sで <col> を使用して実行できますが、ブラウザーのサポートがすべてではありません。

少し改善したい場合は、table-layout: fixedで<table>を使用して、ブラウザーがよりシンプルで高速で予測可能な固定テーブルレイアウトアルゴリズムを使用できるようにします。 .showルールによってセルがdisplay: noneにならない場合、自動的に.hideになるため、display: table-cellルールを削除することもできます。テーブル表示を明示的に設定するのではなくデフォルトに戻すことにより、テーブル表示値がサポートされていないIE <8の問題を回避できます。

20
bobince

JQueryを使用する1行のコード：

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

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

ソース： jQueryコードの1行でテーブル列を非表示

36
Leniel Maccaferri

単純な列の非表示を探している場合は、：nth-​​childセレクターも使用できます。

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

画面が狭すぎるときに幅の広いテーブルを圧縮するために、@ mediaタグとともにこれを使用することがあります。

14
Ponyboy

あなたがすでにやっていることを避けるためにあなたができることはないと思いますが、クライアントで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;
}
1
rob