Difference between revisions of "How to put zebra stripes on sortable wiki tables"
From Organic Design wiki
m (→The code) |
m (→The code) |
||
Line 5: | Line 5: | ||
// Initialises stripes on all zebra tables after page load | // Initialises stripes on all zebra tables after page load | ||
$(document).ready(function() { | $(document).ready(function() { | ||
− | $('table.zebra tbody tr:nth-child(even)').addClass('even | + | $('table.zebra tbody tr:nth-child(even)').addClass('even'); |
− | $('table.zebra tbody tr:nth-child(odd)').addClass('odd | + | $('table.zebra tbody tr:nth-child(odd)').addClass('odd'); |
}); | }); | ||
Latest revision as of 17:23, 3 October 2015
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|