I want to hide/show table columns

• using classes on columns,
• without adding classes to each <td>

Table sample:

<table id="huge-table" border="1">
    <caption>A huge table</caption>

    <colgroup>
        <col class="table-0">
        <col class="table-0">
        <col class="table-1">
        <col class="table-1">
    </colgroup>

    <thead>
        <tr>
            <th>h1</th>
            <th>h2</th>
            <th>h3</th>
            <th>h4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
            <td>1,4</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
            <td>2,4</td>
        </tr>
    </tbody>
</table>

Unfortunately $(".table-1").hide() doesn't work.

So I would like to get columns indexes by class and to use them with the nth-child selector:

indexes = getColumnIndexesByClass("table-1");
for ( var i=0; i<indexes.length; i++ ) {
    $('#huge-table td:nth-child(indexes[i])').hide();
}

How can I implement the getColumnIndexesByClass function or any other equivalent solution?

EDIT

The table size is not known. I know only the classes.

I want to hide/show table columns

• using classes on columns,
• without adding classes to each <td>

Table sample:

<table id="huge-table" border="1">
    <caption>A huge table</caption>

    <colgroup>
        <col class="table-0">
        <col class="table-0">
        <col class="table-1">
        <col class="table-1">
    </colgroup>

    <thead>
        <tr>
            <th>h1</th>
            <th>h2</th>
            <th>h3</th>
            <th>h4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <td>1,3</td>
            <td>1,4</td>
        </tr>
        <tr>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
            <td>2,4</td>
        </tr>
    </tbody>
</table>

Unfortunately $(".table-1").hide() doesn't work.

So I would like to get columns indexes by class and to use them with the nth-child selector:

indexes = getColumnIndexesByClass("table-1");
for ( var i=0; i<indexes.length; i++ ) {
    $('#huge-table td:nth-child(indexes[i])').hide();
}

How can I implement the getColumnIndexesByClass function or any other equivalent solution?

EDIT

The table size is not known. I know only the classes.

• javascript
• jquery
• html
• css

3 Answers 3

Try this (using a slightly modified version of Raynos' function) and check out the demo:

function getColumnIndexesByClass(class) {
  return $("." + class).map(function() {
    return $(this).index() + 1; // add one because nth-child is not zero based
  }).get();
}

var indexes = getColumnIndexesByClass('table-1'),
    table = $('#huge-table');
for ( var i=0; i<indexes.length; i++ ) {
  table.find('td:nth-child(' + indexes[i] + '), th:nth-child(' + indexes[i] + ')').hide();
}

function getColumnIndexesByClass(class) {
    return $("." + class).map(function() {
        return $(this).index();
    }).get();
}

This function returns an array of numbers. I.e.

getColumnIndexesByClass("table-1") === [2,3]

$.each(getColumnIndexesByClass("page-1"), function(key, val) {
    $("#hugetable td").filter(function() {
        return $(this).index() === val;
    }).hide();
});

The above will get all your tds and filter them to only tds in a particular index. Then hide those.

You may want to do more caching / optimisation.

In jQuery you can use $('.table-0').index() to find the position of the first matched element in relation to its siblings.

The full example would be:

var classname = 'table-0';
var indices = $('.'+classname).map(function() {return $(this).index()+1}).get();
$.each(indices, function(iter, val) {
    $('td:nth-child('+val+'), th:nth-child('+val+')', '#huge-table').hide();
});

This also hides the headers. Note that in :nth-child count starts from 1. You could also have this in a single line, but it would look more ugly. You may also want to define a function for selecting indexes, but currently the code is only 3-5 lines long (given that you already have the class name) and is quite readable.

Read here for details about the index method: http://api.jquery./index

Edited: selects multiple columns with the same class, uses context.