HTML Table Filter ala Excel
A way to filter a large table in a simple manner.
Demo
<script language="javascript"></script><input id="chk" önclick="enableFilter();" type="checkbox" name="chk" />Enable Filter
| Col1 | Col2 |
|---|---|
| 1 | string |
| 1 | string2 |
| 2 | String |
| 2 | STRING2 |
| 3 | |
| 1 | string |
| 1 | string2 |
| 2 | String |
| 2 | STRING2 |
| 3 |
Introduction
When I was writing a web application, I needed a way to filter a large table in a simple manner. The users of the application are used to the auto filtering in MS Excel, so I wanted my filter to have the same look and feel.
Features
- Once a column is filtered, the dropdown boxes for the rest of the columns are adapted to the changes. Just like the auto filter in Excel works!
- If a row has the class
noFilter, the row will not be touched by the filter.
Using the code
Using the code is very simple. Just include the script to the page:
<script language="javascript" src="tablefilter.js"></script>
And activate the filter in the OnLoad:
<body onload="attachFilter(document.getElementById('tbl'), 1)">
attachFilter expects two parameters:
- The table object to attach the filter to.
- The row number at which the filter row should be inserted.
Browser Compatibility
The script was initially written for IE. I did test it successfully on Firefox, but I do not know if the script works for Netscape browsers.
History
- 2005/07/27: First version.