How to put zebra stripes on sortable wiki tables

For some reason, the version of jquery.tablesorter that ships with MediaWiki doesn't include the zebra widget, so here's a JavaScript snippet that you can put into your MediaWiki:Common.js article that will add zebra stripes to all tables that have "zebra" in their class attribute. If the table is sortable, this snippet rebuilds the stripes on a table after the sort is run.

The code

// Initialises stripes on all zebra tables after page load
$(document).ready(function() {
	$('table.zebra tbody tr:nth-child(even)').addClass('even');
	$('table.zebra tbody tr:nth-child(odd)').addClass('odd');
});

// Re do stripes on a table after sort finishes
$(document).on('sortEnd.tablesorter', function(event) {
	var table = $(event.target);
	if(table.hasClass('zebra')) {
		$('tbody tr:nth-child(even)',table).addClass('even').removeClass('odd');
		$('tbody tr:nth-child(odd)',table).addClass('odd').removeClass('even');
	}
});

The stripes are in the form of "odd" and "even" class attributes added to the table's TR elements, so for the stripes to be visible you'll need to add a CSS rule to your MediaWiki:Common.css article as well.

table.zebra tr.odd {
	background-color: #eee;
}

An example

Here's an example sortable table that has the zebra class added.

Wiki markup		What it looks like in your browser
{|class="wikitable sortable zebra" !Foo!!Bar |- |4||apple |- |3||orange |- |2||peach |- |1||banana |}		Foo Bar 4 apple 3 orange 2 peach 1 banana

See also

• Wikipedia:Help:Sorting
• MediaWiki code snippets
• JavaScript