▼入力したテキストにマッチするデータに絞り込んで表示します。
ブラウザ | アクセス数 | アクセス総数に占める割合 | |
---|---|---|---|
Firefox | ファイヤーフォックス | 1484 | 32.42% |
Internet Exploer 6 | インターネットエクスプローラ 6 | 1449 | 31.65% |
Internet Exploer 7 | インターネットエクスプローラ 7 | 1269 | 27.72% |
Safari | サファリ | 165 | 3.6% |
Google Chrome | グーグルクローム | 97 | 2.12% |
Opera | オペラ | 93 | 2.03% |
iMODE | アイモード | 5 | 0.11% |
iPhone | アイフォン | 5 | 0.11% |
Internet Exploer 5.5 | インターネットエクスプローラ 5.5 | 3 | 0.07% |
Mozilla | モジラ | 3 | 0.07% |
NetScape7.x | ネットスケープ 7.x | 2 | 0.04% |
Internet Exploer 8 | インターネットエクスプローラ 8 | 1 | 0.02% |
Sleipnir | スレイプニル | 1 | 0.02% |
Softbank | ソフトバンク | 1 | 0.02% |
<!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; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery quickSearch plug-in | 設置サンプル</title> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script src="/content/lib/jquery/jquery.quicksearch.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('table#table_exp tbody tr').quicksearch({ position: 'before', attached: 'table#table_exp', stripeRowClass: ['odd', 'even'], labelText: 'データ検索:' }); $('ul#list_exp li').quicksearch({ position: 'before', attached: 'ul#list_exp', loaderText: '', delay: 100, labelText: 'データ検索:' }); }); </script> <!-- CSS --> <style type="text/css"> table { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; margin:1em 0; padding:0; } thead th { background-color:#333; color:#fff; } th, td { border-bottom:1px solid #ccc; text-align:left; } .right { text-align:right; } .odd { background-color:#fff; } .even { background-color:#eee; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://rikrikrik.com/jquery/quicksearch/'>jQuery quickSearch plug-in</a> | 設置サンプル</h1> <p>▼入力したテキストにマッチするデータに絞り込んで表示します。</p> <!-- CODE --> <h2>例:テーブルデータの簡易検索</h4> <table id="table_exp"> <thead> <tr> <th colspan="2">ブラウザ</th> <th>アクセス数</th> <th>アクセス総数に占める割合</th> </tr> </thead> <tbody> <tr><td>Firefox</td><td>ファイヤーフォックス</td><td class="right">1484</td><td class="right">32.42%</td></tr> <tr><td>Internet Exploer 6</td><td>インターネットエクスプローラ 6</td><td class="right">1449</td><td class="right">31.65%</td></tr> <tr><td>Internet Exploer 7</td><td>インターネットエクスプローラ 7</td><td class="right">1269</td><td class="right">27.72%</td></tr> <tr><td>Safari</td><td>サファリ</td><td class="right">165</td><td class="right">3.6%</td></tr> <tr><td>Google Chrome</td><td>グーグルクローム</td><td class="right">97</td><td class="right">2.12%</td></tr> <tr><td>Opera</td><td>オペラ</td><td class="right">93</td><td class="right">2.03%</td></tr> <tr><td>iMODE</td><td>アイモード</td><td class="right">5</td><td class="right">0.11%</td></tr> <tr><td>iPhone</td><td>アイフォン</td><td class="right">5</td><td class="right">0.11%</td></tr> <tr><td>Internet Exploer 5.5</td><td>インターネットエクスプローラ 5.5</td><td class="right">3</td><td class="right">0.07%</td></tr> <tr><td>Mozilla</td><td>モジラ</td><td class="right">3</td><td class="right">0.07%</td></tr> <tr><td>NetScape7.x</td><td>ネットスケープ 7.x</td><td class="right">2</td><td class="right">0.04%</td></tr> <tr><td>Internet Exploer 8</td><td>インターネットエクスプローラ 8</td><td class="right">1</td><td class="right">0.02%</td></tr> <tr><td>Sleipnir</td><td>スレイプニル</td><td class="right">1</td><td class="right">0.02%</td></tr> <tr><td>Softbank</td><td>ソフトバンク</td><td class="right">1</td><td class="right">0.02%</td></tr> </tbody> </table> <h2>例:リストデータの簡易検索</h4> <ul id="list_exp"> <li>Firefox</li> <li>Google Chrome</li> <li>Internet Exploer</li> <li>Mozilla</li> <li>Netscape</li> <li>iMODE</li> <li>Safari</li> <li>Sleipnir</li> <li>Softbank</li> </ul> <!-- CODE / --> </div> </body> </html>