【jquery】テーブルを検索して合致するセルをハイライト

テーブルのセルの文字列を検索して、合致したセルの背景色を変えるサンプルです。
ブラウザの検索とほぼ同じ機能なので、あまり使わないかもしれませんが。。
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');）しています。

サンプルページはこちら