bugfix> html > 投稿

ブートストラップを使用して表を表示およびソートしています。テーブル内の各ヘッダーに一時的な矢印(または何か)を実装して、どの方向にソートされているかを示すことができるかどうかを考えていました。

回答 2 件
  • はい、これは可能です。ヘッダーには、次を追加します...

    <table>
        <thead>
             <tr>
                 <th>Column 1 <span class="glyphicon glyphicon-sort"></th>
                 ...
             </tr>
        </thead>
    </table>
    
    

  • 編集:アイコンを使ってテーブルを並べ替える必要があると仮定します。

    これは動的な動作であるため、純粋なHTML/CSSでこれを行うことはできません。JavaScriptを使用する必要があります。これを実現するために行う一般的な手順は次のとおりです。

    JavaScript変数内にすべてのテーブル行を保存する

    <th> の中 、 <span> のような別の要素を配置します  または <img>  矢印画像が含まれています。

    表の行の配列を並べ替えるクリックハンドラーを矢印に接続します

    配列を並べ替えた後、DOM API関数を使用して古いテーブルを削除し、新しいテーブルを作成して、その場所に新しいテーブルを挿入します。ブートストラップは通常jQueryで使用されるため、いくつかのjQuery関数を調べてテーブルを削除し、新しいテーブルを作成して(行を調べて)、古いテーブルの代わりに作成したテーブルをページにレンダリングできます。

    これを行うさまざまなライブラリがありますが、自分で実行することでより簡単に実現できます。

あなたの答え