How to hide table columns in jQuery?

jquery row show-hide
understack picture understack · Apr 7, 2010 · Viewed 16.7k times · Source

I've a table with lots of columns. I want to give users the option to select columns to be shown in table. These options would be checkboxes along with the column names. So how can I hide/unhide table columns based on checkboxes?

Would hiding (using .hide()) each td in each row work? May be I can assign checkbox value to the location of column in table. So first checkbox means first column and so on. And then recursively hide that 'numbered' td in each row. Would that work?

Answer

Rex M picture Rex M · Apr 7, 2010

Try:

function hideColumn(columnIndex) {
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide();
}

This is a pretty basic version - it assumes your table doesn't use <TH> elements or have variable column spans, but the basic concept is there. Note that nth-child uses 1-based indexing. I've added 1 at the latest stage to compensate for that.

Related questions

jQuery: count number of rows in a table

How do I count the number of tr elements within a table using jQuery? I know there is a similar question, but I just want the total rows.

Read More
Remove table row after clicking table row delete button

Solution can use jQuery or be plain JavaScript. I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example: <script> function SomeDeleteRowFunction() { //no clue what to …

Read More
Find Table Row Index using jQuery

I'm an intermediate user in jQuery. I know to find the rowIndex of a table using jQUery, but my scenario is a different one. My table(GridView) consists of 20 columns and each column with different controls like textbox, dropdownlist, image, …

Read More