Как показать скрытый столбец при нажатии кнопки

Question

У меня есть таблица, и мне нужно скрыть/показать столбец таблицы, когда щелкните заголовок столбца, в котором скрывается столбец, и появится кнопка. Когда я нажимаю кнопку, я хочу показать hidden coloumn Как я могу это сделать? см. Мой код здесь http://jsfiddle.net/9QkVd/29/.

Благодаря

$(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

Попробуйте это,

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

Demo

Answer 2

Вот nifty way of doing it, вы можете держать скрытие столбцов и привести их в порядок из самых последних щелкнув элемент.

В основном добавить массив для хранения значений индекса столбца, нажмите на:

var indexVal = []; 

, а затем на кнопку нажмите функцию вы пишете:

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