デモページプラグイン配布サイト JSON からテーブル作成するのに、tableMagic を使用しています。そのテーブルに対して実行するのですが、その為に添付の CSS(defaultTheme.css) が必須なので注意して下さい。 IE でも実用になります fixedTblHdrLftCol では IE で使い物になりませんでしたが、この fixedheadertable では軽快に動作します。ただ、列を固定できるのが左端の1列のみです。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> <script src="tableMagic/js/jquery.tablemagic-min.js"></script> <script src="fht/jquery.fixedheadertable.js"></script> <link rel="stylesheet" href="fht/css/defaultTheme.css"> <link rel="stylesheet" href="css.php"> <style> .trEven { background-color: #FFFFFF; } .trOdd { background-color: #F1F4F8; } #target table * { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif; font-size: 16px; } #target table { border-collapse: collapse; border-style: solid; border-color: #000000; border-width: 1px; background-color: #FFFFFF; } #target table td { padding: 15px; border-style: solid; border-color: #000000; border-width: 1px; white-space: nowrap; } #target table th { padding: 15px; border-style: solid; border-color: #000000; border-width: 1px; background-color: silver; white-space: nowrap; } </style> <script> // jQuery 初期処理 $(function() { $.get("syain.php?cond=" , function(data){ $('#target').tableMagic( data, { firstColTd2Th: false } ); customTable(); $('#target table').fixedHeaderTable( { width: '700', height: '400', fixedColumn: true } ); }); }); function customTable() { $("table").find("th").eq(6).css("text-align", "right"); $("table").find("th").eq(7).css("text-align", "right"); $("table").find("tr").each( function(){ $(this).find("td").eq(6).css("text-align", "right"); $(this).find("td").eq(7).css("text-align", "right"); var kyuyo = $(this).find("td").eq(6).text(); kyuyo = parseInt(kyuyo,10); kyuyo = kyuyo.toLocaleString(); $(this).find("td").eq(6).text(kyuyo); var teate = $(this).find("td").eq(7).text(); if ( teate != "" ) { teate = parseInt(teate,10); teate = teate.toLocaleString(); } $(this).find("td").eq(7).text(teate); } ); } </script> </head> <body> <div id="target"></div> </body> </html>
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- 1会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ