在client端透過輸入框即時搜尋頁面上的表格資料,不過這適用於當資料少的時候,資料量大的時候就該考慮使用ajax方式處理。 

$('#search').keyup(function(){
   var searchword = $('#search').val();
   if(searchword!==''){
      $('.info').css("display","none");
      $('.info').find(":contains('" + searchword + "')").parent().css("display","block");
   }else{
         $('.info').css("display","block");
   }
});

<input type="text" id="search" />

<div class="info">

<span>aa</span>

<span>ab</span>

<span>ac</span>

</div>

<div class="info">

<span>ba</span>

<span>bb</span>

<span>bc</span>

</div>

<div class="info">

<span>ca</span>

<span>cb</span>

<span>cc</span>

</div>

arrow
arrow
    創作者介紹
    創作者 衛斯理不理 的頭像
    衛斯理不理

    衛斯理不理學習心得與技術日常

    衛斯理不理 發表在 痞客邦 留言(0) 人氣()