ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript テーブルのソートとヘッダーのフローティング効果 (拡張 SortTable)_JavaScript スキル

JavaScript テーブルのソートとヘッダーのフローティング効果 (拡張 SortTable)_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 18:54:321301ブラウズ

1. SortTable の説明
SortTable
バージョン 2
2007 年 4 月 7 日
Stuart Langridge、http://www.kryogenix.org/code/browser/sorttable/

説明:
このファイルをダウンロードします
HTML に
を追加します
並べ替え可能にしたいテーブルに class="sortable" を追加します
並べ替えるにはヘッダーをクリックしてください

ありがとう
X11 としてライセンスされています: http://www.kryogenix.org/code/browser/licence.html
これは基本的に、あなたがやりたいことをしてくださいという意味です。

使用法:



2. 更新手順

更新:
バージョン 2.1
2009 年 3 月 9 日
Hopesoft、http:/ /www.51ajax.com/blog/

手順:
1. 中国語の並べ替えを追加
2. 行ごとに異なる CSS スタイルを指定する機能を追加します (奇数と不一致の背景色など)偶数行)
など、ソートするテーブルに CSS を追加します。デフォルトでは、ソート機能はすべての列に追加されます。ソートする必要のない列については、CSS を追加できます。 : "sorttable_nosort"、例:
使用法:

など、ヘッダーをフローティングするテーブルに属性を追加します。3. ヘッダー フローティング関数を追加します (異なるタブの下のテーブルなど、同じページ上の複数のテーブルをサポートします)。 label)
使用法:

など、ヘッダーをフロートさせたいテーブルに CSS を追加します。さらに、「ヘッダー」と「データ」の各列の列幅を指定するのが最善です。行」、例: 名前年齢
Zhang San21

FireFox でテーブル ヘッダーがフローティングされるときに、テーブル ヘッダーの列とデータの列の間のずれを避けるため
4. ページの読み込み後に自動ソートを追加します。
使用法: 属性 autosortcol を追加します。自動的にソートされる列番号に対応するテーブル。
から始まることに注意してください。 たとえば、
は、ページが正常に読み込まれると、
4行目までが中国語でコメントされており、元のコードの一部がブロックされています。また、元のコードではmsの昇順と降順が逆になっていたので、ここを変更しました。
デモ アドレスhttp://img.jb51.net/online/sorttable/sorttable.htm
パッケージ ダウンロード アドレス: http://img.jb51.net/online/ソートテーブル/ソートテーブル.rar
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。