タグ

jQueryとtableに関するteppochanのブックマーク (2)

  • tableをスマホ用に変形

    デスクトップ用にtableで実装された表組みをスマフォでも最適に見えるよう変更するjQueryのプラグインを紹介します。 既存のテーブルにも簡単に対応でき、しかも1KBと超軽量です。 デモページ:幅480pxで表示 左:ヘッダ有り、右:ヘッダ無し 一つのアイテムに対して、それぞれ対応する項目が配置されるようになっています。 ReStableの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery.restable.min.js"></script> <link rel="

  • 第6章 「テーブルソート処理」

    jQuery UIにはテーブルをソートするためのメソッドも用意されています。一般的にテーブルの内容をソートするためのライブラリはいくつかあります (Yahoo UI Libraryにもあります)。また、サーバー側でソートして結果を出力する場合もあります。 jQueryの場合、テーブルタグに対してtablesorter()を指定するだけで自動的にソート機能が追加されます。多分、これ以上簡単なものはないでしょう。テーブルタグにクラス名などを指定する必要もありません。 サンプル1は最もシンプルなテーブルソートの例です。テーブルヘッダーをクリックすると昇順、降順が切り替わります。 (サンプル1を実行する) 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-e

  • 1