SheetrockはPublic設定されているGoogleのスプレッドシートを照会、取得し、table要素として任意のWebサイトに表示出来るスクリプトです。jQueryに依存しています。スプレッドシートの内容は選びそうですが、単純なデータなら親和性ありそうですね。ライセンスはMITとの事です。 Sheetrock

Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
Responsive tables ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 レスポンシブなテーブルというと、どうせ何か削るんでしょう、と思うところですが、主要項目を隠しつつも、見たい項目を選択して表示できるレスポンシブ方式。 テーブルは悩みどころではありますが、1つの解決策として知っておくとよさげ。 デザインもBootstrapベースで使いやすそうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 クールに実装できるレスポンシブなモーダルダイアログ「Remod
gajus/wholly GitHub テーブル行のハイライトに便利なjQueryプラグイン「wholly」。 テーブルのカレントの行がハイライトされると分かりやすいですが、それを簡単に実装できるようです。 colspanをつかったような複雑なテーブルでのハイライトにも対応 関連エントリ 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」 インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 テーブルをグラフに変換できるjQueryプラグイン「TableBarChart」
Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。 最初の表示です。適当にセルをクリックします。 そうするとその場で編集可能になります。 行の追加もできます。 ポストすると各行ごとにデータが入ってくるのが分かります。 Ajaxの場合もJSONの配列で受け取れます。 日付選択に際してカレンダーピッカーを使うこともできます。 行の追加できる数を制限した場合。3行追加した時点でボタンが押せなくなります。 jQuery editTableの使い方は以下のようになります。 var mytable =
Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5+JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン
デスクトップ用に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="
jQuery Animated Table Sorter アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」。 ソート可能なテーブルを実現するjQueryプラグインはよくありますが、アニメーションするのははじめてかも。 どこからどこに移動したか?という部分が分かりやすく、一瞬でソートされてしまうテーブルよりもカッコ良いだけではなく使い勝手もよさそう 関連エントリ シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」
<table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Difference</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>$153.19</td> <td>44.7%</td> <td>+77</td> <td>Jan 18, 2001 9:12 AM</td> </tr> <tr> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる(?)と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
技術屋さんの視点からは「結構キツイな~」と思うことでも、お客様からは「えっ!?それぐらいできないの?」なんて思われることが結構あります。 その代表格はtableをExcelっぽくして欲しい、という要望ではないでしょうか。 なまじっかGooleDocsなんてものがあったりするのでExcelを日常的に使用されているお客様はWEBでもそのようなI/Fを求められます。 ExcelっぽいHTMLテーブル、、 結構キツイのよね・・・。 Flash使える場合はその方向になりますが、1画面だけ、なんて要件でしたらJavascriptで何とかしたい。 JSでテーブルをExcelっぽくするライブラリには、まとまったものではYahooUIやDojoがありますが、行列を固定したスクロールは調べた限りでは出来なさそうでした。 そんな時のJSライブラリ。 ・Super Tables http://www.matts4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く