<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="enter filter terms" onkeyup="filter(this, 'ProcessBody', '1')" /> </caption> <thead> <tr class="header"> <th>Name</th> <th>ObjectId</th> </tr> </thead> <tbody id="ProcessBody"> <tr> <td>Prog (v1)</td> <td class="atr">7121</td> </tr> <tr> <td>Prog (v4)</td> <td class="atr">7124</td> </tr> <tr> <td>Prog (v2)</td> <td class="atr">7122</td> </tr> </tbody> </table> Orignal Script Source: <a href="http://www.vonloesch.de/node/23?filt=j">http://www.vonloesch.de/node/23?filt=j</a>
/*DEFAULT TABLE STYLES------*/ table {font-family:"Droid Sans", "Trebuchet MS"} th { padding:2px; background-color: #f0f0f0; border:1px gainsboro solid; } td { padding: 2px; border:1px gainsboro solid; } tr:nth-child(odd) { background-color: #fff;} tr:nth-child(even) { background-color: #f0f0f0;} tr:hover {background-color:#ccc;} caption { padding:2px; color:gainsboro; background-color:#1e5799; background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ border:1px gainsboro solid; } #ProcessTable {width:400px} .atr {text-align:right}