Tuesday, July 24, 2012

Javascript Table Filter

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: