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

Question

我有一个表格，当点击标题列隐藏列和按钮时，我需要隐藏/显示表格列。单击按钮时，我想显示隐藏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();