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

【问题标题】：How to show hidden column when button is clicked单击按钮时如何显示隐藏列
【发布时间】：2013-12-13 12:36:58
【问题描述】：

我有一个表格，当单击标题列时，我需要隐藏/显示表格列，该列隐藏并且按钮将出现。当单击按钮时，我想显示隐藏的列我该怎么做？在这里查看我的代码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();

    });

【问题讨论】：

标签： javascript jquery html button show-hide

【解决方案1】：

试试这个，

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

Demo

【讨论】：

【解决方案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();

【讨论】：