テーブルのセルの文字列を検索して、合致したセルの背景色を変えるサンプルです。
ブラウザの検索とほぼ同じ機能なので、あまり使わないかもしれませんが。。
jqueryの勉強も兼ねているので・・・ということでサンプルです。
サンプルは、
テキストボックスに検索したい文字を入力、検索ボタンをクリックすると、
入力した文字列が含まれるセルの背景色が黄色に変わります。
HTMLのサンプル
北海道 | 青森県 | 岩手県 |
宮城県 | 秋田県 | 山形県 |
福島県 | 茨城県 | 栃木県 |
群馬県 | 埼玉県 | 千葉県 |
東京都 | 神奈川県 | 山梨県 |
長野県 | 新潟県 | 富山県 |
石川県 | 福井県 | 岐阜県 |
静岡県 | 愛知県 | 三重県 |
滋賀県 | 京都府 | 大阪府 |
兵庫県 | 奈良県 | 和歌山県 |
鳥取県 | 島根県 | 岡山県 |
広島県 | 山口県 | 徳島県 |
香川県 | 愛媛県 | 高知県 |
福岡県 | 佐賀県 | 長崎県 |
熊本県 | 大分県 | 宮崎県 |
鹿児島県 | 沖縄県 | その他 |
都道府県を羅列しているだけのテーブルです。
jqueryのサンプル
$(document).ready(function(){ //検索ボタンクリック $(document).on("click", "[id='seach']", function() { $('#testTable').each(function () { $(this).find('td').each(function () { if($(this).text().match(new RegExp($('#search_word').val(),"g"))) { $(this).attr('style', 'background-color:yellow'); } else { $(this).attr('style', ''); } }); }); }); });とても簡単でテーブルのtdセルのループして、セルのテキスト($(this).text())と、
テキストボックスに入力したテキスト($('#search_word').val())を
正規表現を使ったあいまい検索を行い、
合致したセルにスタイルを設定($(this).attr('style', 'background-color:yellow');)しています。
サンプルページはこちら
0 コメント:
コメントを投稿