ZebraTable

ZebraTable is a MooTools plugin that allows you add simple mouseenter/mouseout and click table row highlighting.

Plugin Code (Version 1.0)

var ZebraTable = new Class({
	/* implements */
	Implements: [Options],

	/* options */
	options: {
		elements: 'table.list-table',
		cssEven: 'even',
		cssOdd: 'odd',
		cssHighlight: 'highlight',
		cssMouseEnter: 'mo'
	},
	
	/* initialization */
	initialize: function(options) {
		/* set options */
		this.setOptions(options);
		/* zebra-ize! */
		$$(this.options.elements).each(function(table) {
			this.zebraize(table);
		},this);
	},
	
	/* a method that does whatever you want */
	zebraize: function(table) {
		/* for every row in this table... */
		table.getElements('tr').each(function(tr,i) {
			/* check to see if the row has th's
				if so, leave it alone
				if not, move on */
			if(tr.getFirst().get('tag') != 'th') {
				/* set the class for this based on odd/even */
				var self = this.options, klass = i % 2 ? self.even : self.odd;
				/* start the events! */
				tr.addClass(klass).addEvents({
					/* mouseenter */
					mouseenter: function () {
						if(!tr.hasClass(self.cssHighlight)) tr.addClass(self.cssMouseEnter).removeClass(klass);
					},
					/* mouseleave */
					mouseleave: function () {
						if(!tr.hasClass(self.cssHighlight)) tr.removeClass(self.cssMouseEnter).addClass(klass);
					},
					/* click */
					click: function() {
						if(!tr.hasClass(options.cssHighlight))
							tr.removeClass(options.cssMouseEnter).addClass(options.cssHighlight);
						else
							tr.addClass(options.cssMouseEnter).removeClass(options.cssHighlight);
					}
				});
			}
		},this);
	}
});

Options

• elements: (defaults to "table.list-table") the tables to highlight upon initialization.
• cssEven: (defaults to "even") the CSS class for even rows
• cssOdd: (defaults to "odd") the CSS class for odd rows
• cssHighlight: (defaults to "highlight") the CSS class that gets toggled upon click
• cssMouseEnter: (defaults to "highlight") the CSS class that gets toggled upon mouseenter and mouseleave

Code Revisions & Bug Fixes

None.