1

フィドルはここにあります。

colgroupのcolidで実際の列を取得して切り替えるのに問題があります。インデックスは正しく一致していますが、colgroupの機能を使用して列全体を取得する方法がわかりません。これが私の現在の試みです（フィドルの一番下まで）：

    //Column Button Hider
    $('fieldset.techtable input.column[type=checkbox]').on('change', function() {
        var index = $(this).prevAll('input.column').length+2;
        console.log(index);
        $('fieldset.techtable' #col'+index').toggle()
            //($('#col'+index).toggle());
    });

そしてここにテーブルとcolgroupがあります：

<section class="techtable">
        <h1>Technologies / Compliance / Certifications</h1>
        <table cellspacing="0">
            <colgroup>
                <col id="col0">
                <col id="col1">
                <col id="col2">
                <col id="col3">
                <col id="col4">
                <col id="col5">
                <col id="col6">
            </colgroup>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Skill</th>
                    <th>Version(s)</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Elapsed Time</th>
                    <th>Expertise Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Technology</td>
                    <td>J2EE</td>
                    <td>1.5, 1.6, 1.7</td>
                    <td>November, 2011</td>
                    <td></td>
                    <td></td>
                    <td>2</td>
                </tr>
                </tr>...repeating...</tr>
            </tbody>
        </table>
    </section>

colgroupの機能を利用したいのですが、クラスIDを使用する必要があるかどうかわかりません（使用する場合は、col group idのどこ？、<th>？または各<td>？）。

は？に<th>干渉してい<colgroup>ますか？おそらくより良い言葉で言えば、colgroupを使用する代わりにthを参照する必要がありますか？

構文の正しい方向へのポイントは役に立ち、役立つコード行は常にありがたいですが、これについては、方法論を見落とさない限り、これをより多くのコード行に拡張することを避けようとしています。私はcolidを正しく取得しているだけではないという前提の下にありますが、あなたのフィードバックは私が間違っていることを証明する可能性があります。

4

4 に答える 4

3

データの特定の列を非表示にしようとしている場合、colgroup 内の列を非表示にすることはできません。

var colIndex = 0; // first column
$(myTable).find("td,th").filter(":nth-child(" + (colIndex+1) + ")").toggle();

あなたのテーブルで動作するようにこのコードを修正しました。これが更新されたフィドルです

 var index = $(this).prevAll('input.column').length+2;
 $('colgroup').parent('table').find("td,th").filter(":nth-child(" + (index+1) + ")").toggle();
于 2012-06-11T20:06:57.417 に答える
1

これをやろうとしていますか？

$('fieldset.techtable #col' + index).toggle();

id はページ内で一意であるため、通常はそれをターゲットにするだけで十分です。

$('#col' + index).toggle();
于 2012-06-11T19:39:59.357 に答える
1

次のことを試してください。

$(".techtable td:nth-child("+index+1+")").toggle();

これを見た：HTMLテーブルの列を非表示/表示

于 2012-06-11T20:08:37.773 に答える
0

列はページ上の実際の要素よりも多くのメタデータ/疑似要素であるため、列の表示を切り替えることはできないと思います (実際には、切り替えようとしているtrそれぞれの N 番目です)。tdまさにこの理由で一貫してスタイルを設定しようとすると問題があることを私は知っています (説明/調査については、こちらの回答を参照してください)。

于 2012-06-11T20:10:21.127 に答える