1

私は次のものを持っています：

    <div id="btnL">Left</div>
    <div id="btnR">Right</div>

    <table id="tab1">
            <thead>
                    <tr>
                            <td>Item</td>
                            <td>Price</td>
                            <td>Descript</td>
                    </tr>
            </thead>
            <tbody>
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>
                    .
                    .
                    .
                    <tr>
                            <td>Entry</td>
                            <td>Entry</td>
                            <td>Entry</td>
                    </tr>

            </tbody>
    </table>

    <script>
            $("#btnR").click(function(e) {
                    $("#tab1 thead tr td:nth-child(n+2).css("display","table-cell");
                    $("#tab1 thead tr td:nth-child(-n+1).css("display","none");
            });
            $("#btnL").click(function(e) {
                    $("#tab1 thead tr td:nth-child(n+2).css("display","none");
                    $("#tab1 thead tr td:nth-child(-n+1).css("display","table-cell");
            });
    </script>

コードは期待どおりに機能し、最後の要素を隠して表示します。問題は、テーブルに 20,000 行あり、レンダリングが非常に遅いことです。ビューポート内の要素 (+- いくつか) にのみ影響を与え、ユーザーが下にスクロールすると、一度にすべてを変更するのではなく、他の要素を変更したいと考えています。

4

1 に答える 1

1

特定の列を非表示にする場合。テーブルの作成中に、その列の各tdにクラスをアタッチします（たとえば、クラスはと呼ばれspecialTDます）。

次のようにCSSに入力します。

table.hideCol .specialTD {表示：なし; }

これで、列を非表示/表示する必要があるときはいつでも、テーブルのクラスを追加/削除するだけです。

ちなみに、あなたの子セレクターは私には間違っているようです。

-n + 1は、最初のtdのみを意味します。
n + 2は、秒から始まるすべてのtdを意味します。

http://css-tricks.com/how-nth-child-works/を参照してください

于 2012-12-20T20:04:44.837 に答える