Uncategorized

Hide a TABLE column with JQuery

Yesterday I helped debug an issue with migrating from SP2007 to SP2010.  There was some old JS code where a SELECT box was filtering a ListView based on some key columns, and consequently there were some columns with GUIDs that needed to be hidden.

First of all, let me be clear that this is not a good practice.  Live filtering of tables doesn’t work very well, especially when you are using SP ListViews that are generating their own markup.  To make matters worse, the code was traversing the inner HTML of every TD on the page to examine its contents in order to determine whether to hide the page.  It was also 80 lines of JS.

I replaced it by adding a script link to JQuery and adding this function:

function HideColumn(i, el){

$("th:nth-child(" + i + "), td:nth-child(" + i + ")", el).hide();

}