MediaWiki:Gadget-ToggleableTableColumns.js

Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: hold down Ctrl and click the Refresh or Reload button. Firefox: hold down ⇧ Shift while clicking Reload (or press Ctrl+⇧ Shift+R). Google Chrome and Safari users can just click the Reload button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

$('.toggleable-columns-table').each(function(i, table) {
	// Find the list of names of each toggle column group.
    var groups = $(table).find('[data-col-group]');
    var unique_group_names = $.uniqueSort(groups.map(function(i, e) {
        return $(e).data('col-group');
    }));
    // Add the column number as a data attribute to each table cell.
    // (This will makke it easier to show/hide columns without having to worry about rowspans.)
    $(table).find('td, th').each(function(i, e) {
        $(e).attr('data-col', get_col_index(e));
    });
    // Build the HTML for the column-toggling controls
    var toggleHtml = '<div class="toggleable-columns-controls toccolours hlist" style="border: 1px solid var(--border-color-base); display: inline-block; font-size: 95%; padding: 0.375em;">'; 
    toggleHtml += ' <dl>';
    toggleHtml += ' <dt>Show columns</dt>';
    unique_group_names.each(function(i, name) {
        toggleHtml += ' <dd><label class="nowrap">';
        toggleHtml += '<input type="checkbox" checked="checked" value="' + name + '" ';
        toggleHtml += 'class="column-toggle" style="position: relative; top: .125em;" /> ';
        toggleHtml += name;
        toggleHtml += '</label> </dd>';
    });
    toggleHtml += ' </dl> </div>';
    // Put the controls before the table
    $(table).before(toggleHtml);
});
// When a checkbox in the controls is changed, show/hide the appropriate columns.
$('.column-toggle').change(function(e) {
    var $controls = $(e.target).parents('.toggleable-columns-controls');
    var $table    = $controls.next('table');
    var $toggleable_columns = $table.find('[data-col-group]');
    var visible_col_names = $controls.find('.column-toggle:checked').map(function(i, e) {
        return e.value;
    }).toArray();
    // Prepare an array of the index numbers of columns to be hidden.
    var hidden_col_indexes = [];
    $toggleable_columns.each(function(i, e) {
        if (visible_col_names.indexOf($(e).data('col-group')) == -1) {
            hidden_col_indexes.push($(e).data('col'));
        }
    });
    // Show all columns to reset the table state.
    $table.find('th, td').css('display', '');
    // Hide the columns whose number is in the hidden column array.
    for (var i = 0; i < hidden_col_indexes.length; i++) {
        $table.find('[data-col="' + hidden_col_indexes[i] + '"]').css('display', 'none');
    }
});
/**
 * Get the column index number of a cell
 * If it is in the first column, return 0, the second column, return 1, etc.
 *
 * This is different than getting the index of the `td` within the `tr` because
 * it takes into consideration rowspans of previous `tr`.
 *
 * @param HTMLElement cell - A `th` or `td` element
 * @return int
 */
function get_col_index(cell)
{
    var row_number = cell.parentNode.rowIndex;
    var col_index = -1;
    // Loop through each header column.
    $(cell).parents('table').find('tr:first th').each(function() {
		// Check if the cell is further to the left than the header column,
		// to determine if the cell is in the column.
        if (cell.offsetLeft >= this.offsetLeft) {
            col_index++
        } else {
            return false;
        }
    });
    return col_index;
}