長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
【jQuery】非表示のテーブルを表示する場合は『display:table』とするべき。 - すたら日記
【不都合】『display:none』で非表示にしているブロック要素をJavascriptで 表示させる場合、普通は『display:block』と指定すると思います。 しかし、テーブル(<table>)で『display:block』と指定すると、 Firefoxなど一部のブラウザでは以下のようになってしまいます。 ▲<table>の枠線が、画面いっぱいに広がってる…！ HTML: <table> <tbody> <tr><th>aaa</th><td>1111</td></tr> <tr><th>bbb</th><td>2222</td></tr> <tr><th>ccc</th><td>3333</td></tr> </tbody> </table> CSS: table{ border:2px solid #f00; display:none; } th, td{ border:2
jQueryでテーブルをラジオボタンでソート（プラグインなし）
jQueryでテーブルをラジオボタンでソート（プラグインなし） jQuery2010年12月25日 よくプラグインでテーブルをソートする機能が紹介されていますが、自分はあんまプラグインを追加するのが好きじゃないというのもあり、自作してみました。 ついでに自動でストライプ模様になるよう実装しています。 jQueryはこちらからダウンロード 実際のサンプル HTML <ul class="list-sort"> <li><label for="line-all"><input type="radio" id="line-all" class="item" value="あ行" name="select" />すべて</label></li> <li><label for="line-01"><input type="radio" id="line-01" class="item" value=
【jQuery】tableのtrを取得したいのに。:</gecko>：げことじ。：日常からWEBまで：
以下のようなtableを書いたときに子要素であるtrを取得したいわけで。 <table id="table"> <tr> <td>hoge1</td> <td>hoge2</td> </tr> <tr> <td>hoge3</td> <td>hoge4</td> </tr> <tr> <td>hoge5</td> <td>hoge6</td> </tr> </table> <form action="javascript:void(0);"><input id="input" type="button" name="" value="run" /></form> 単純にjQueryを使うと $("#input").click(function(){ console.log($("table").children()); //jQuery(tbody) }); としちゃうんですが。 どうや
jQuery で table をいじるときは tbody を忘れない
まぁ普通に会員の一覧検索みたいな管理画面を作っていて、普通に table でタグが組んであって、それを項目名をクリックしたらその項目名の昇順で並び替えたいとか、そんなような作業ってのは結構あるわけで。 なんかこう、テーブルのそのデータ行の部分だけを Ajax で load するようにしたいなと。 思ったわけです。 で、テーブルは普通に、こんな感じであって、 <table id="result"> <tr> <th>ID</th> <th>氏名</th> <th>メールアドレス</th> </tr> <tr> <td>1</td> <td>山田</td> <td>yamada@・・・.jp</td> </tr> <tr> <td>2</td> <td>佐藤</td> <td>sato@・・・.jp</td> </tr> </table> このデータ行の部分だけを Ajax で書き換えたいって
jQuery :: チェックボックスが並んだテーブルをjQueryでどーこーするサンプル :: ウェブデザイナーの日記
先日、TraversingのアレコレをNettuts+に教わりましたんで、その応用練習ってことで、よくあるテーブルのデザインのサンプルをつくってみました。こういうの↓ http://1-pixel.com/sample/jquery-table/sample.html cssはhtml内に書かれています。よくあるヤツです。jsはコレです↓ $(function(){ table(); }); function table(){ $('tr', '#sample-table') .hover( function(){ $(this).addClass('tr-selected'); }, function(){ if(!$('input[type="checkbox"]', this).attr('checked')){ $(this).removeClass('tr-selected');
テーブルのヘッダとフッタを固定する簡易プラグイン - Cyokodog :: Diary
更新履歴 2010-06-02 jQuery.exTable.js を Ver 0.1.2 に更新 jQuery 1.3 以上のバージョンで正常動作しない不具合を修正しました。 サンプルを含む zip ファイルでダウンロードできるようにしました。 2010-01-21 jQuery.exTable.js を Ver 0.1.1 に更新 セルの内包要素の膨張、table 要素の margin 設定等によるレイアウト崩れ抑止処理を追加しました ヘッダ・ボディ・フッタ内のテーブル要素を取得するゲッターメソッドを追加しました 記事中のソースを修正しました だいぶ前に書いた「tableのヘッダを固定させる簡易scriptをサクっと作ってみた」というエントリに、「サンプルソースを参考にフッタも固定しようとしたけどうまくいかない」というコメントを先日頂きました。今にして見ると、前回、前々回のエントリで書
tableのヘッダ固定やソートとかのAjax系ライブラリまとめ - Cyokodog :: Diary
１週間かけて食中毒もなんとか直ったのでブログ再開します。（もうこりごりです....） 例のごとくはてブをすっきりさせたいのでtable関連のリンクをこちらにまとめてく予定です。まだまだありそうですが、おいおい追加してきます。 コアライブラリ非依存系 Table Sorter ソート | MOONGIFT | demo table sorting ソート | to-R | demo OrderByColumn ソート | PHPSPOT | demo sorttable ソート | MOONGIFT | demo SortedTable ソート | demo TableKit ソート、編集 | PHPSPOT | demo Tiny Table ソート、縞々、ページング | coliss | demo Scrollable HTML table ヘッダ固定 | PHPSPOT | demo
Ajax系ライブラリによくあるtableのヘッダ固定の仕組みを調べてみた - Cyokodog :: Diary
更新履歴 2010-01-21 下記エントリでヘッダ、フッタを固定させる簡単なプラグインのソースを記載してます。 テーブルのヘッダとフッタを固定する簡易プラグイン - Cyokodog::Diary tableのヘッダ部分を固定表示するには？ 2001年頃のIE5.0時代、はじめてwebシステムを作った頃、初心者向け言語のJavascriptを駆使して何とかできないかといろいろ調べた記憶があります。で思いついたのがこちらの小飼さん方式と同じ方法。 詳しくは末尾のソースをご覧頂くとして、要点をまとめると、 本来一つのtableで表示するところを、三つのtableに分ける table一つ一つをdivで囲む 上下のdivには、thead,tfootに対応するtableをおく 真ん中のdivに、tbodyに対応するtableを置き、scrollの設定はdivで行う 上中下の各table内のtd,t
縦線・横線などを消す - スタイルシート・サンプル
TABLE { border-collapse: collapse; border-style: solid; /* 枠の種類 */ border-color: #666699; /* 枠の色 */ border-width: 1px; /* 枠の幅 */ } TH { color: #ffffff; /* 文字の色 */ background-color: #99cc99; /* 背景の色 */ border-style: solid; /* 枠の種類 */ border-color: #666699; /* 枠の色 */ border-width: 1px 0px; /* 枠の幅 */ } TD { color: #ffffff; /* 文字の色 */ background-color: #9999cc; /* 背景の色 */ border-style:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無効なURLです