160

複数の列を持つ 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>
4

9 に答える 9

266

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

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

テーブルにheader（th）がある場合は、次を使用します。

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

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

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

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

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

于 2011-05-05T16:50:46.087 に答える
87

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

個人的には、class-on-each-td/th/col アプローチを使用します。次に、次のようなスタイル ルールを想定して、コンテナーの className への 1 回の書き込みを使用して、列のオンとオフを切り替えることができます。

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

これは、どの JS ループ アプローチよりも高速になります。非常に長いテーブルの場合、応答性に大きな違いが生じる可能性があります。

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

于 2009-01-19T14:16:12.807 に答える
12

colgroup を使用できます。

<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>クラスだけを変更できます。

于 2009-01-18T21:52:20.343 に答える
11

次のようにする必要があります。

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

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

于 2009-01-18T21:57:03.253 に答える
5

そしてもちろん、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;}

など...

于 2014-05-18T13:28:54.467 に答える
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>
于 2009-01-18T22:15:35.803 に答える
0

授業なし？次にタグを使用できます。

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

そして、それらの使用を示すために：

...style.display = 'table-cell';
于 2013-08-13T16:32:44.313 に答える