table-row-highlighter.js

2009-06-06: Update

Now also as a jQuery-plugin. Blog-post.

This article is about my solution to an issue/request mentioned in my “Usability-tips for your application (Part I)” regarding highlighting corresponding table-rows when keys are pressed.

Take a look at the demo-page and play a little around.

Download the script.

Usage

<style type="text/css">
table tr.highlight td { background-color: yellow; }
</style>
<script type="text/javascript" src="table-row-highlighter_0.2.js"></script>
<script type="text/javascript"><!--
// Should be substituted with your own play-nice-by-adding-events-method
window.onload = function() {
	MIO.highlighter.init(
		document.getElementById("mytable"), // Reference to table-node
		0 // Which column to check against, defaults to 0.
	);
}
// --></script>

More details can be found on the demo-page as referenced above.

What do you think?

There are a couple of improvements just around the corner, but thought I’d just share the idea and an example. Feedback are welcome, and if you improve it, please send me the changes so I can update the code.

Be Sociable, Share!

4 Comments

  1. […] table-row-highlighter.js – My prototype of abovementioned functionality […]

  2. Mats Lindh says:

    Very nice, although I suggest writing this as a jQuery plugin instead. Should be a bit more lean code and be attractive for a larger crowd!

  3. michaelo says:

    Thanks Mats! Yes indeed – a good idea. I was actually thinking about it – thought I’d just sort it out with basic JS first. jQuery-plugin is coming up soon!

  4. […] In an effort to make it easier integratable to existing environments, I have now created a jQuery-plugin as well. Thanks to Mats as well for suggesting it! […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>