HTMLテーブルの列を非表示/表示


146

複数の列を持つHTMLテーブルがあり、jqueryを使用して列チューザーを実装する必要があります。ユーザーがチェックボックスをクリックすると、テーブルの対応する列を表示/非表示にします。テーブルのすべてのtdにクラスをアタッチせずにこれを実行したいのですが、jqueryを使用して列全体を選択する方法はありますか?以下はHTMLの例です。

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

2
次のサイトがお役に立てば

私はjQueryを使用してこのソリューションを実装しましたが、私にとっては完全に機能しました。http
Aaron

1
user344059のコメントによると、ここに壊れたリンクhttp://www.fiendish.demon.co.uk/html/javascript/hidetablecols.htmlの
KyleMit

回答:


84

すべてのtdにクラスをアタッチせずにこれを実行したい

個人的には、class-on-each-td / th / colアプローチを採用します。次に、コンテナのclassNameへの単一の書き込みを使用して、列のオンとオフを切り替えることができます。

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

これは、JSループのアプローチよりも高速になります。本当に長いテーブルの場合、応答性に大きな違いをもたらす可能性があります。

IE6をサポートしなくても済む場合は、隣接セレクタを使用して、tdsにクラス属性を追加する必要をなくすことができます。あるいは、マークアップをよりクリーンにすることが懸念される場合は、初期化ステップでJavaScriptからそれらを自動的に追加できます。


7
アドバイスのおかげで、HTMLをすっきりさせたいと思っていましたが、テーブルのサイズが100行に近づくにつれて、パフォーマンスが明らかに問題になりました。このソリューションにより、パフォーマンスが2〜5倍向上しました。
ブライアンフィッシャー

2
このアプローチは、パフォーマンスの点で私にとって不思議に働きました。ありがとう!
axelarge 2012

4
私はこれをCSSに追加して.hidden {display:none;}使用.addClass('hidden')しまし.removeClass('hidden')たが、これは.hide()およびよりも少し高速でした.show()
スタイル

247

2列目を非表示にするjQueryを使用したコードの1行:

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

テーブルにheader(th)がある場合、これを使用します。

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

ソース:jQueryコードの1行でテーブル列を非表示にする

コードをテストするjsFiddle:http ://jsfiddle.net/mgMem/1/


良いユースケースを見たい場合は、私のブログ投稿をご覧ください。

jQueryを使用して、テーブルの列を非表示にし、値に基づいて行に色を付けます


1
例にないように、これはコルスパンを無視する問題はありませんか?あなたがそれらを使用していない場合でも良い。関連する別の質問があります:stackoverflow.com/questions/1166452/...は
キム・R

2
ページャーでフッターが非表示にならないように、tbodyをセレクターに追加する必要がありました。
Alex

@KimRこれはCOLSPANの問題のために役立つことstackoverflow.com/questions/9623601/...
yunzen

正確な理由はわかりませんが、機能させるには、代わりに「nth-of-type」を使用する必要がありました。例:$( 'table td:nth-​​of-type(2)')。hide();
Leopoldo Sanczyk 2014年

@LeopoldoSanczyk Safariを使用していましたか?タイプが必要なようです
ykayはモニカを2015

12

colgroupsを使用できます。

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

その後、スクリプトは欲求<col>クラスだけを変更できます。


colgroupがクロスブラウザーをサポートしていないことはもう本当ではないことを覚えているようです。
ブライアンフィッシャー

多分。この方法をハイライト列に使用しています(firefox、safari、chromeは正常に動作します)。IEで試したことはありません。
ルイスメルグラッティ2009年

@ブライアン-IE8が機能せず、IE7を有効にしたIE8が機能しているようです。
Nordes、

4
これは最近のブラウザー(ChromeおよびFirefox)では機能しないようです
JBE

@JBE:正確には、これ最新のブラウザである程度機能します$('table > colgroup > col.yourClassHere')jQueryセレクターを使用しても、列全体の背景色のように色を設定できますが、列の表示設定を切り替えることができなくなります。テストしたブラウザは、MSIE 11、Safari 5、Chromium 44、Opera 12、Mozilla SeaMonkey 2.40、Mozilla Firefox 43でした。「HTML 4.01のほとんどの属性はHTML5ではサポートされていません」- こちらを参照してください
ベース

11

以下はそれを行うべきです:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

これはテストされていないコードですが、原則は、チェックボックス名から抽出された選択されたインデックスに対応する各行のテーブルセルを選択することです。もちろん、セレクターをクラスまたはIDで制限することもできます。


11

これは、列ごとにユーザー操作を提供する、もう少し完全な機能を備えた回答です。これが動的なエクスペリエンスになる場合は、列を非表示にする機能を示す各列にクリック可能なトグルが必要であり、以前に非表示にした列を復元する方法があります。

JavaScriptでは次のようになります。

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

これをサポートするために、テーブルにマークアップを追加します。各列ヘッダーに、このようなものを追加して、クリック可能なものを視覚的に示すことができます

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

ユーザーがテーブルフッターのリンクを介して列を復元できるようにします。デフォルトで永続的でない場合は、ヘッダーで動的に切り替えると、テーブルの周りを揺さぶる可能性がありますが、実際には好きな場所に配置できます。

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

それが基本機能です。以下は、さらにいくつかの具体化されたデモです。ボタンにツールチップを追加して、その目的を明確にし、ボタンをテーブルヘッダーに少し有機的にスタイル設定し、列幅を折りたたんで、いくらか(やや不安定な)CSSアニメーションを追加して、遷移を少し少なくすることもできます。びくびく。

デモ画面グラブ

jsFiddleとStack Snippetsのデモ:


最も近い1列を非表示にしていますが、最も近い3列を非表示にする方法は?
ニーマルゴスワミ2018年

-私のテーブルチェックi.stack.imgur.com/AA8iZ.png テーブルのHTMLが含まれているとの質問に- stackoverflow.com/questions/50838119/...ボタンはA、BおよびCの後に来る
ニーマルゴスワミ

そのような古い答えを復活させて申し訳ありませんが、特定の列をデフォルトで非表示に設定する簡単な方法はありますか?私はそうしようとしています$(document).readyが運がありません
RobotJohnny '22

1
@RobotJohnny、いい質問です。これは、クラス.hide-colを使用して列を削除しますが、状態を示すためにも使用できるため、htmlをレンダリングするときに.hide-col、各tdtrに追加して実行できます。または、より少ない場所に追加したい場合は、ヘッダーに挿入し(その状態はどこかに移動する必要があります)、初期状態でそれを使用して、子間でその列インデックスを非表示にします。現在、コードはクリック時の位置をリッスンしていますが、クラスの位置を探すように変更することもできます。また、トルコの幸せな日
カイルミット

1
@RobotJohnny、私は初期化処理も含むようにコードサンプルを更新しました。class='hide-col'HTMLの必要な場所にドロップするだけで(おそらくthead > tr > th最も意味のある場所にあり、その列のすべてのセルを非表示にし、復元フッターも動的に表示することを確認します
KyleMit

4

そしてもちろん、CSSは以下をサポート するブラウザのための唯一の方法ですnth-child

table td:nth-child(2) { display: none; }

これはIE9以降用です。

ユースケースでは、列を非表示にするいくつかのクラスが必要です。

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...


2

以下は、いくつかのマイナーな変更を加えたEranのコードに基づいています。テストしたところ、Firefox 3、IE7で問題なく動作するようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

0

クラスなし?次に、タグを使用できます。

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

そして、それらを使用することを示すには:

...style.display = 'table-cell';            
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.