A New Look For Zebra Striped Tables

After reading A List Apart's article about if zebra striping (Link) makes any significant impact on speed/accessibility, I thought I would knock a quick demo up of taking zebra striping a step further using the mouseover event of jQuery, to me this appears to speed up scanning of the data.

For clarification I should point out a couple of things I didn't make clear for the reason of creating the demo, It was in response to a comment to A List Apart's original article in which a users mentioned case studies (I believe in the print world) that visual noise impairs responsiveness to tabular data, I wanted to show a simple and effective way of reducing the noise, I will sometime this week come back to it and build something a bit more robust, for the moment though it was just to show a simple way of reducing noise and get feedback.

If you have any ideas on improvement email me, I've not checked if anyone has done this before in any manner, if you have email me (Christian 'at' design-desires.co.uk and i'll credit you :).

This took me all of about 2min's thanks to the excellent jQuery library, and the zebra striping example by Jack Born over @ http://15daysofjquery.com

UPDATE: Neil Roberts over @ SitePen has created a Dojo based example and taken it a step further you can view his demo here, Thanks Neil

UPDATE 2: Peter Higgins who also works for SitePen has also created a Dojo based example, Peter's demo is a direct copy of my example in which he uses opacity as opposed to Neil's demo which uses the css color key, you can view his demo here, Thanks Peter

NOTE: I've only tested this in FF and I'm using opacity for the effect

		$(document).ready(function(){
			$(".stripeMe tr").mouseover(function() {
				$(this).addClass("over");
				$(this).prev().css({ opacity: "0.4"});
				$(this).prev().prev().css({ opacity: "0.6"});
				$(this).next().css({ opacity: "0.4"});
				$(this).next().next().css({ opacity: "0.6"});
			}).mouseout(function() {
				$(this).removeClass("over");
				$(this).prev().css({ opacity: "1.0"});
				$(this).prev().prev().css({ opacity: "1.0"});
				$(this).next().css({ opacity: "1.0"});
				$(this).next().next().css({ opacity: "1.0"});
			});
			$(".stripeMe tr:even").addClass("alt");
		});
Product Company Stock Qty Price Purchase Link
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order
Basic Widget Widgets Inc 5 £4.99 Order