Tabbed Table Select Columns Enhancement

The previous post provided code for using tabs to navigate the content of a multi-column table. It includes a feature that lets a user select the columns to display. If there are many columns in the table, the list will get long and it may be necessary to scroll the page. I just found a small jQuery that can easily reformat the list. The plug-in is available at: http://fredkelly.net/multi-column-lists-meet-jquery.

See the updated tabbed table example.

It can be implemented using the single line of code at the end of this code block.

$('#tabSelCols').click(function() {
var popList = "<ul>";
var chkbox = "<li><label><input type='checkbox'>";
$('#tabTable tr:first td').each(function() {
    var colName = $(this).text();
    popList = popList + chkbox + colName + "</label></li>"
})
$('#colList').html(popList);
$('#selectColumns').slideDown(300);
$('#colList ul').multilists({ cols: 2 });
})

Thanks to Fred Kelly for this plug-in.