JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
テーブルの列を並べ替える
説明
補足説明
コード
分割コード
関連書籍
コメント投稿
このサンプルは、jQueryのtablesorter()プラグインを利用してテーブルの列を並べ替えします。サンプルが表示されたらテーブルの列をクリックしてください。クリックした列を昇順/降順に並べ替えします。
このサンプルを編集して試してみる
←サンプルが背後に隠れて見えないときは左をクリック ！
$("table").tablesorter(); <table cellspacing="1" class="tablesorter"> ... </table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - Table Sorter </title> <link href="jQuery/tableSorter/blue/style.css" rel="stylesheet" type="text/css" /> <!-- <link href="jQuery/tableSorter/green/style.css" rel="stylesheet" type="text/css" /> --> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/tableSorter/jquery.tablesorter.js" type="text/javascript"></script> <script src="jQuery/tableSorter/jquery.tablesorter.pager.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("table").tablesorter(); //$("table").tablesorter({ // sort on the first column and third column, order asc //sortList: [[0, 0], [2, 0]] //}); }); </script> </head> <body> <div id="demo"> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Peter</td> <td>Parker</td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>Jul 6, 2006 8:14 AM</td> </tr> <tr> <td>John</td> <td>Hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>Dec 10, 2002 5:14 AM</td> </tr> <tr> <td>Clark</td> <td>Kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>Jan 12, 2003 11:14 AM</td> </tr> <tr> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>Jan 18, 2001 9:12 AM</td> </tr> <tr> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>Jan 18, 2007 9:12 AM</td> </tr> </tbody> </table> </div> </body> </html>
CSS部
HEAD部
BODY部
ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。
/* tables */ table.tablesorter { font-family:arial; background-color: #CDCDCD; margin:10px 0pt 15px; font-size: 8pt; width: 100%; text-align: left; } table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; border: 1px solid #FFF; font-size: 8pt; padding: 4px; } table.tablesorter thead tr .header { background-image: url(bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } table.tablesorter tbody td { color: #3D3D3D; padding: 4px; background-color: #FFF; vertical-align: top; } table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } table.tablesorter thead tr .headerSortUp { background-image: url(asc.gif); } table.tablesorter thead tr .headerSortDown { background-image: url(desc.gif); } table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; }
ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。
<link href="jQuery/tableSorter/blue/style.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/tableSorter/jquery.tablesorter.js" type="text/javascript"></script> <script src="jQuery/tableSorter/jquery.tablesorter.pager.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("table").tablesorter(); }); </script>
ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。
<div id="demo"> <table cellspacing="1" class="tablesorter"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Peter</td> <td>Parker</td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>Jul 6, 2006 8:14 AM</td> </tr> <tr> <td>John</td> <td>Hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>Dec 10, 2002 5:14 AM</td> </tr> <tr> <td>Clark</td> <td>Kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>Jan 12, 2003 11:14 AM</td> </tr> <tr> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>Jan 18, 2001 9:12 AM</td> </tr> <tr> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>Jan 18, 2007 9:12 AM</td> </tr> </tbody> </table> </div>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
このサンプルは、jQueryのtablesorter()プラグインを利用してテーブルの列を並べ替えします。サンプルが表示されたらテーブルの列をクリックしてください。クリックした列を昇順/降順に並べ替えします。
このサンプルを編集して試してみる!
$("table").tablesorter(); <table cellspacing="1" class="tablesorter"> ... </table>
Access
|
ASP.NET + Ajax
|
ASP.NET 3.5 + Ajax
|
JavaScript + jQuery