トップページ -> 実践知識 -> JavaScript と JQueryUI による Web プログラミング -> テーブル・ソーターを使ってみる
[サイトマップへ], [サイト内検索へ],

テーブル・ソーターを使ってみる

サイト構成 連絡先,業績など 実践知識 データの扱い コンピュータ 教材 サポートページ

前準備

前準備として http://tablesorter.com/docs/ から tablesorter をダウンロードしておく

テーブル・ソーターの例

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Table Sorter
        </title>
    
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

        <link rel="stylesheet" href="themes/blue/style.css" />
        <script type="text/javascript" src="jquery.tablesorter.js"></script> 
        <script type="text/javascript" src="jquery.metadata.js"></script> 
        
        <script type="text/javascript">
          <!--      
            jQuery.noConflict();
            jQuery(document).ready(function($) {
              $("#sortable01").tablesorter();
            });
          //-->          
        </script>
        

    </head>

    <body>

<table id="sortable01" class="tablesorter">
<thead>
<tr>
    <th>id</th>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫量</th>
    <th>合計</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>りんご</td>
    <td>150</td>
    <td>15</td>
    <td>2250</td>
</tr>
<tr>
    <td>2</td>
    <td>みかん</td>
    <td>30</td>
    <td>60</td>
    <td>1800</td>
</tr>
<tr>
    <td>3</td>
    <td>バナナ</td>
    <td>180</td>
    <td>30</td>
    <td>5400</td>
</tr>
<tr>
    <td>4</td>
    <td>いちご</td>
    <td>400</td>
    <td>10</td>
    <td>4000</td>
</tr>
</tbody>
</table>

    </body>
</html>

実行結果の例

テーブル・ソーター + テーブルの行に配色

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Table Sorter
        </title>
    
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

        <link rel="stylesheet" href="themes/blue/style.css" />
        <script type="text/javascript" src="jquery.tablesorter.js"></script> 
        <script type="text/javascript" src="jquery.metadata.js"></script> 
        
        <script type="text/javascript">
          <!--      
            jQuery.noConflict();
            jQuery(document).ready(function($) {
              $("#sortable01").tablesorter();
              $("table tr:first-child").addClass("first-child");
              $("table tr:last-child").addClass("last-child");
              $("table tr:nth-child(even)").addClass("even");
              $("table tr:nth-child(odd)").addClass("odd");
              $("tr:nth-child(odd)").addClass("odd").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
              $("tr:nth-child(even)").addClass("even").mouseover(function(){ $(this).addClass("hover") }).mouseout(function(){ $(this).removeClass("hover") });
            });
          //-->          
        </script>
        
        <style>
         table tr:first-child { 
              background-color: #808080;
         }
         table tr:nth-child(even) { 
              background-color: #ffffff;
         }
         table tr:nth-child(odd) { 
              background-color: #d0d0e0;
         }
         table .hover { 
              font-size: x-large;
         }
        </style>
    </head>

    <body>

<table id="sortable01" class="tablesorter">
<thead>
<tr>
    <th>id</th>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫量</th>
    <th>合計</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>りんご</td>
    <td>150</td>
    <td>15</td>
    <td>2250</td>
</tr>
<tr>
    <td>2</td>
    <td>みかん</td>
    <td>30</td>
    <td>60</td>
    <td>1800</td>
</tr>
<tr>
    <td>3</td>
    <td>バナナ</td>
    <td>180</td>
    <td>30</td>
    <td>5400</td>
</tr>
<tr>
    <td>4</td>
    <td>いちご</td>
    <td>400</td>
    <td>10</td>
    <td>4000</td>
</tr>
</tbody>
</table>

    </body>
</html>

実行結果の例