How to put zebra stripes on sortable wiki tables

From Organic Design wiki

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 = $(;
	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

See also