I love this simple filter, easy to apply to any table.
 <script type="text/javascript">
 /*<![CDATA[*/
 function filter (phrase, _id) {
   var words = phrase.value.toLowerCase().split(" ");
   var table = document.getElementById(_id);
   var ele;
   for (var r = 0; r < table.rows.length; r++ ) {
    ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
     var displayStyle = 'none';
     for (var i = 0; i < words.length; i++) {
      if (ele.toLowerCase().indexOf(words[i])>=0) { displayStyle = '';}
      else { displayStyle = 'none';  break; }
     }
    table.rows[r].style.display = displayStyle;
   }
 }
 /*]]>*/
 </script>
   <table id="ProcessTable" class="grid" >
<caption>
    <label title="start typing letters or numbers to limit">Filter:</label>
    <input type="search" name="filt" id="Filter"
     placeholder="filter results"
     onkeyup="filter(this, 'ProcessBody', '1')"  />
Source:http://www.vonloesch.de/node/23?filt=j
Demo
 
 
No comments:
Post a Comment