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.
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.
[…] table-row-highlighter.js – My prototype of abovementioned functionality […]
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!
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!
[…] 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! […]