Table-row-highlighter_0.2.js

This is an example of how to implement table-row-highlightning on key-press with JavaScript.

Related blog-post. - the place for feedback and bug-reports.

About, features, how it works

It attaches to any given table, and then awaits for keypress-events after which it will search through the table for matching rows and adds the class "highlight" to the first matching row.

It has support for multiple characters and customizable timeout. This means that you can start typing a word and it will give you a closer match.

ESC forces a timeout.

It's case-insensitive.

Tested in: Opera 9.64 & 10 beta, Firefox 3.0.10, Safari 3 & 4 beta, IE7

Try it yourself: I've appended a table on the bottom of this page - start writing the name of a country, i.e. Norway.

License

The do-whatever-you-want-license - but I'd like you to keep an reference to me.

Installation

Download the main-script.

• table-row-highlighter_0.2.js (4,295 bytes)

Define a CSS-rule for the highlighted rows:

table tr.highlight td { background-color: yellow; }

Activate, preferrable by good event-attaching.

window.onload = function() {
	MIO.highlighter.init(table_element, check_col);
	// i.e.: .init(document.getElementsByTagName("TABLE").item(0), 0) <- will get the first table that appears in the DOM, and check against its first column
}

To-do

• Some browsers fail on special-characters, like the Norwegian "æ", "ø" and "å".
• Add support for accented characters etc
• Activation-modes: It's now mainly intended for a single table, but would like to activate i.e. by clicking on one of several tables etc.
• Review event-handling (yup, it's my little bastard for now)
• Dynamically changing which column to match against - is now set in the initialization (it will be relevant if the data i.e. is sorted on an other column).

Demonstration

Michael Odden 2009 - http://michaelodden.com/