HTML Table Filter ala Excel

WoutL

Rate me:

4.75/5 (37 votes)

3 Aug 2005CPOL1 min read

224.5K

2.3K

A way to filter a large table in a simple manner.

Download source files - 1.6 KB

Demo

<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:

HTML

<script language="javascript" src="tablefilter.js"></script>

And activate the filter in the OnLoad:

HTML

<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

WoutL

Web Developer

Netherlands

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.