この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter() 使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete=
Dable テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」 依存ライブラリがゼロなのも使いやすく、Bootstrapなサイトでも使えるスタイルが入ってます。 以下がBootstrapなサイトでも使えるスタイル。 残念ながらレスポンシブには非対応。 ライブラリを配布する場合は、Bootstrapでも使えてレスポンシブだとライブラリの価値が上がりますね。 関連エントリ BootstrapベースのフラットUI実装フレームワーク「Furatto」 Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Twitter BootStrap に追加できる５つのコンポーネントパック「FuelUX」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap
Lode77 Link Terbaru Link Akses Situs Lode777 Original No Hoax Hubungi Live Chat Center Kami. Cs Online 24/7. Update 2025-01-08 22:12 Lode777 SATU-SATUNYA LINK ALTERNATIF ASLI BANGET DARI LODE777 Platform Lode777 Hadir Di tengah pesatnya perkembangan dunia digital, LODE 777 telah menjadi salah satu platform andalan bagi pecinta permainan slot online di Indonesia. Dengan menghadirkan berbagai permai
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
JQuery Datatables plugin example with Php & Mysql - Share My Code jQuery＋PHP＋MySQLでデータグリッドを作るサンプル。 PHPでMySQLのデータを出すことってあったりしますが、単にテーブルで出すとかっこわるいですね。 次のようなインタフェースで出してあげると、検索やソート、ページング処理がついてくるので便利そうです。 単に出力するのはやめてこうしたライブラリの力を借りれば少ないステップで簡単に便利な機能を提供できそうです。 サクッと保存されているデータを確認したい、けどphpMyAdmin程の機能は必要ないし、ちょっと危ないみたいな場合に使えそうですね。 関連エントリ かっこいいページ送り付きのグリッドを簡単につくれる「OpenJS Grid」 好みのグリッドを作成してPNGやPhotoshop形式でダウンロー
Making a table become selectable with rbTable テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」。 テーブルのセル上にカーソルがあうと色が変わって、クリックすると更に選択状態にできるというjQueryプラグインです。 沢山のデータをたどる上で、こういった機能はとても便利ですが通常のテーブルにはありませんね。 ちょっとした一手間で使いやすいテーブルにできるので覚えておいもよいかも。 CSSなどは自分で指定してデザインすることが出来るので、自分で好きなようにデザインすることができるはずです。 初期化には次のように、CSSのクラスを指定してあげるだけです $('.table').rbTable({row:"your_class", rowClick:"your_click_class"}); 関連エントリ 超カッコいい
jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); }); }); 列のどこにいてもクリック出来るようにする。tr要素には予めdata-href=”http://example.com”というマークアップをしてあります。 マー
あと、最近のブログはここ JavaScript++かも日記 Facebookの仮想通貨Libra/Diemが来春リリースらしいので久しぶりに触ってみてます Facebookの仮想通貨Libra/Diem関連 |Blog | Demo | Facbook JavaScript部 | jQuery › Downloads › Plugins › csv2table | ( ccchart/ jQchart ) nightly- testing themeroller width jQuery 1.3. test-tm.htm blog デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table ) csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。 このページに$.csv2table.cssReset(
左上のアローをクリックすると、チェックボックスが表示されます。 スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。 スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。 オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea>
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ
テーブルのユーザビリティを飛躍的に向上させる「Chromatable」。 Chromatableはテーブルのヘッダーを固定させ、テーブルの要素にスクロールバーを付けることができるjQueryプラグインです。 普通のテーブル Chromatableで初期化 次のようにスクロールしてもヘッダー位置はそのままで非常に分かりやすい。 実装方法 実装方法も超簡単で、JSコード自体はたったの１行で実装可能。 <!-- ライブラリ読込み --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.chromatable.js"></script> <!-- 初期化方法１ --> <script> $(document).ready(functio
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
com.overset.dev Blog Archive Animated Sortable Datagrid jQuery plugin - jTPS jQueryでアニメーションするソート可能なデータグリッド実装ライブラリ。 次のような、美しいＵＩでかつ、ページング・ソート機能付きなグリッドが実装できます。 ページ移動時のアイテムの移動がアニメーションします。 グリッド自体は、スタイルシートを切ると単なるテーブルで、JavaScriptによって初期化されているのがいいですね。 関連エントリ jQueryでリッチなグリッドを実装「jqGrid」 Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」 手軽に使えるExcel風グリッドＵＩ「Flexigrid for jQuery」
こんばんは。松田です。 ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。 「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換え、リサイズなどいろんな機能を自動的に付けてくれます。 まずは普通にテーブルを作ってみます。 ソース とてもシンプルでかっこわるいですね！ これをFlexigridを使ってかっこよくしてみます。 やることは３つ。 ・headタグ内でスクリプトとCSSの読み込み ・テーブルにID（ここでは'flexigrid_table'）を指定 ・スクリプト $('#flexigrid_table').flexigrid(); の呼び出し これだけです。 そして、Flexigrid化したテーブルが下のものになります。 ソース すごくオサレになりましたね！ ※IE7ではt
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード（zip：15kbくらい） 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。 試行錯誤した結果、背景でやってみることにしたらうまく行きました。 ただ、背景でやるにしてもその切り方がちょっとだけ、工夫？する必要があります。 該当画像は、後ほど。 CSSは、こんな感じになってます。 #main table { border-coll
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
