2014年3月24日月曜日


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

コメントを投稿

要望&問い合わせ

名前

メール *

メッセージ *