单击按钮时如何显示隐藏的列

Question

I have a table, and I need hide/show the table column when click the header the column the column hide and the button will appear.when click the button i want to show the hidden coloumn How can I do this? see my code here http://jsfiddle.net/9QkVd/29/ .

Thanks

$(function() {
    $('table tbody tr:odd').addClass('alt');

    $('table tbody tr').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});

$('tr th:gt(0)').click(function() {

    var index = (this.cellIndex + 1);
    var cells = $('table tr > :nth-child(' + index + ')');
    cells.toggleClass('hide');

    if ($(this).hasClass('hide')) {
        $(this).find('span').html('<b>+</b>');
    }
    else {
        $(this).find('span').html('<b>-</b>');
    }

    if ($('table tr > th:not(.hide)').length)
        $('table').removeClass('hide');
    else
        $('table').addClass('hide');
     $('.btnAssociate').show();
});

 $('.btnAssociate').click(function()
    {


         $('.btnAssociate').hide();

    });

Answer 1

Try this,

$('.btnAssociate').click(function () {
    $('table th,table td').removeClass('hide');
    $('.btnAssociate').hide();
});

Demo

Answer 2

Here is a nifty way of doing it , you can keep hiding the columns and bring them back in order of the most recently clicked item.

Basically add an array to store the index values of the column you click on:

var indexVal = [];

And then on the button click function you write:

var cells = $('table tr > :nth-child(' + indexVal[indexVal.length-1] + ')');
cells.toggleClass('hide');
indexVal.pop();
if (!indexVal) $('.btnAssociate').hide();