jQuery Plugin for Zebra Striping tables including dynamic Row Insertion Deletion

 

This is a simple jQuery plugin which applies alternating CSS for rows in a table.

Offical jQuery site :

http://plugins.jquery.com/project/ZebraStriping

Download (right-click and save as..):

jquery.zebra.js

Features:
1. Alternate row CSS
2. Row hover CSS
3. Handles row insertion/deletion dynamically via javascript(does not work for IE as it does not support DOMNodeInserted event.)
4. Option to exclude header row
5. Works with THEAD and TBODY too.

note: workaround for IE is the zebra plugin must be called again if a new row is added via javascript.

Example usage:

Save the code at the bottom of the page as jquery.zebra.js.

Include it in the HEAD section of your page like:

<script src="jquery-latest.js"></script>
<script src="jquery.zebra.js"></script>

And then call it on a table like:

$("#targetTable,#targetTable2").zebra({
		excludeHeader:true,
		hover:'hoverClass',
		odd:'oddClass',
		even:'evenClass'
	});

Plugin Code:

/** 
 * Namespace to avoid variable name collision
 * 
 * Author: Sajjan Sarkar
 * 
 *  */
(function($)
{
	/** Plugin starting point,options is optional but this plugin does nothing if options is null */
	$.fn.zebra = function(options)
	{
		/** Current settings */
		var settings = {
			even : '',/** CSS class name for even rows */
			odd : '',/** CSS class name for odd rows */
			hover : '',/** CSS class name rows when hovered */
			excludeHeader : false /** true to exclude thead/ first row  */
		};
		/** to maintain jQuery chainability */
		return this.each(function()
		{
			/** local variables identifying whether the table has thead/tbody */
			var hasTHead = $("thead", this).length == 0 ? false : true;
			var hasTBody = $("thead", this).length == 0 ? false : true; // not used as of now
			
			/** Variable to store reference to the table as the this keyword in the
			 *  apply() function would point to the DOMWindow object due closure.
			 *  
			 */
			var gTable = this;
			
			/** Store the table header jQuery collection based on whether there is a THEAD , also for performance */
			if (hasTHead)
				var headerSelector = $("thead > tr", this);
			else
				var headerSelector = $("tr:first-child", this);
			/** If options exist, lets merge them with our default settings */
			if (options)
			{
				$.extend(settings, options);
			}
			/** 
			 *  For browsers that support this (IE does not support it), everytime the DOM structure is changed
			 *  we test if a new row is added to the table and apply the plugin to the entire table again
			 *  as the row could have been added in the middle.
			 *  Note: for IE, the zebra plugin must be called again if a new row is added
			 *  */
			$(this).bind('DOMNodeInserted', function(event)
			{
				/** Check if a row has been inserted */
				if (event.relatedNode.nodeName == "TR")
				{
					apply();					
				}
			});
			
			/** internal function to apply the plugin logic. */
			var apply = function()
			{
				/** Apply zebra striping to header row/s */
				if (hasTHead)
				{
					$("thead > tr:even", gTable).removeClass(settings.even + " " + settings.odd).addClass(settings.even);
					$("thead > tr:odd", gTable).removeClass(settings.even + " " + settings.odd).addClass(settings.odd);
				}
				/** Apply zebra striping to body rows */
				$("tbody > tr:even", gTable).removeClass(settings.even + " " + settings.odd).addClass(settings.even);
				$("tbody > tr:odd", gTable).removeClass(settings.even + " " + settings.odd).addClass(settings.odd);
				
				/** Apply hover logic to entire table */
				$("tr", gTable).hover(function()
				{
					$(this).addClass(settings.hover);
				}, function()
				{
					$(this).removeClass(settings.hover);
				});
				/** Exclude header if option is set */
				if (settings.excludeHeader)
				{
					headerSelector.removeClass(settings.even + " " + settings.odd);
					headerSelector.unbind('mouseenter mouseleave');
				}
			};
			/** Call it */
			apply();
			// plugin code here
		});
	};
})(jQuery);

Sample: