Show/ Hide Table Column with colspan using jQuery

Question

I have a HTML table as shown in http://jsfiddle.net/Lijo/auny3/ . The table has 10 columns – divided into three col groups. I need to hide/show the colgroup named “Associate Info” (including its rows data) using buttons “Show Associate” and “Hide Associate”.

What is the best way (in terms of performance) for doing this using jQuery?

Please answer if you have a better answer than http://jsfiddle.net/Lijo/auny3/8/

Note: I am generating the table using ASP.Net GridView as given in http://www.sacdeveloper.com/Community/Articles/tabid/86/ctl/ArticleView/mid/458/articleId/1/Group_columns_in_an_ASPNet_Gridview.aspx

Reference:

Selected Answer

http://jsfiddle.net/Lijo/UqdQp/2/

enter image description here

can u change your html if yes than it's possbile with jquery — Rohit Azad Malik, Sep 17 '12 at 08:39

score 2 · Answer 1 · answered Sep 17 '12 at 08:49

2

Hi now used to this

Jquery

$(document).ready(function(){

$("#show").click(function(){
    $("#showhide").show();
    });



    $("#hide").click(function(){
    $("#showhide").hide();
    });
})

and some change to your html

Live demo

answered Sep 17 '12 at 08:49

Rohit Azad Malik

31,410
17
69
97

It works. However, I won't be able to use it. I am generating the table using GridView. Wrapping the table columns inside a table may not be feasible. Can you suggest an alternative? – LCJ Sep 17 '12 at 09:01

score 2 · Answer 2 · answered Sep 17 '12 at 09:02

2

Or you can use nth-child selector:

$('input').click(function(){
    if($(this).val() == "Hide Associate"){
    $('th:nth-child(2), td:nth-child(2), th:nth-child(3):not(:first), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5)').hide();
    }else{
        $('th:nth-child(2), td:nth-child(2), th:nth-child(3):not(:first), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5)').show();
    }
});

answered Sep 17 '12 at 09:02

Alex Ball

4,404
2
17
23

Thanks. I tried to apply to other section also. That didn't work. What need to be changed to make it work? http://jsfiddle.net/Lijo/auny3/9/ – LCJ Sep 17 '12 at 09:14
1

@Lijo in the else statement change `hide` to `show`and to hide the "Associate Info" add `th:nth-child(3):first` in the selectors. See [This](http://jsfiddle.net/alex_ball/auny3/10/) – Alex Ball Sep 17 '12 at 09:18

score 2 · Answer 3 · answered Sep 17 '12 at 09:35

2

Here, working with your current HTML, and will keep working if your Associate Info header ever stored more columns (the script is looking for its colspan attribute to fetch the appropriate number of columns).

$("input").on("click", function(e){
    e.preventDefault();

    var label = $(".resultGridTable .tableColGroupAssociate"),
        colspan = parseInt(label.attr("colspan"), 10),
        associate = $("tr:gt(0)")
                        .find("th:gt(0):lt("+ colspan +"), td:gt(0):lt("+ colspan +")")
                        .add(label);

    if($(this).val() == 'Hide Associate') associate.hide();
        else associate.show();
});

DEMO

answered Sep 17 '12 at 09:35

aaaaaa

2,588
3
26
31

Can you please explain how it works? I am confused about ".add(label)" – LCJ Sep 17 '12 at 10:44
1

It's storing every element we want to hide or show into the `associate` object. It first stores columns 1 to 4 from lines 1 to 3, and then adds ([jQuery.add](http://api.jquery.com/add/)) to those elements the "Associate Info" cell. That way, we have every element we want to work with in a single jQuery object: `associate`. – aaaaaa Sep 17 '12 at 16:12
Thanks. So, you are using zero based indexing in the above explanation. Also, the variable name "label" can be renamed as "firstLine". – LCJ Sep 18 '12 at 04:42
I have posted a generalized approach as answer. Please provide your thoughts – LCJ Sep 18 '12 at 11:14

score 1 · Accepted Answer · edited May 23 '17 at 12:31

I have generalized the idea provided by @Pioul. Hence please upvote for @Pioul also if you like this answer. This generalized approach is available in http://jsfiddle.net/Lijo/UqdQp/10/

References:

CODE

var associateStartElementString = "EmpID";
var financialStartElementString = "Type";

var associateHTMLElements;
var financialHTMLElements;

var associateHideClass = '.tableColGroupAssociate';
var financialHideClass = '.tableColGroupTransaction';

$(document).ready(function () {



////////Hide Sections


//Associate Hide
$('.associateHide').live("click", function (e) {
    e.preventDefault();


    var hideClass = associateHideClass; 
    associateHTMLElements = HideSection(hideClass, associateStartElementString);

    $('.btnAssociate').show();

});

//Financial Hide
$('.financialHide').live("click", function (e) {
    e.preventDefault();

  var hideClass = financialHideClass ;

    financialHTMLElements = HideSection(hideClass, financialStartElementString);

    $('.btnFinancial').show();

});


////SHOW 
$('.btnAssociate').click(function()
{
    associateHTMLElements.show();

      var firstHeaderLineElement = $(".resultGridTable").find(associateHideClass );

    firstHeaderLineElement.show(); 

});


$('.btnFinancial').click(function()
{
    financialHTMLElements.show();

      var firstHeaderLineElement = $(".resultGridTable").find(financialHideClass );

    firstHeaderLineElement.show(); 

});



//Function 1
function HideSection(hideClass, startElementString) 
{

var htmlElement = GetTableSections(hideClass, startElementString);

var firstHeaderLineElement = $(".resultGridTable").find(hideClass);

var variableToSet;

if (!(htmlElement === undefined)) {

    variableToSet = htmlElement;
    htmlElement.hide();
    firstHeaderLineElement.hide();
}

return variableToSet;
}


//Function 2
function GetTableSections(hideClass, referenceHeaderCellValue) {


var firstHeaderLineElement = $(".resultGridTable").find(hideClass);
var colspan = parseInt(firstHeaderLineElement.attr("colspan"));


var startElementIndex = GetNonColSpanIndex(referenceHeaderCellValue);


if (startElementIndex > 0) {

    startElementIndex = (startElementIndex - 1);

    var selectedElements = $("tr:gt(0)")
                                    .find("th:gt(" + startElementIndex + "):lt(" + colspan + "), td:gt(" + startElementIndex + "):lt(" + colspan + ")");

    return selectedElements;

}


}

//Function 3
function GetNonColSpanIndex(referenceHeaderCellValue) {


var selectedCell = $("th").filter(function (i) {
    return ($.trim($(this).html())) == referenceHeaderCellValue;


});


var allCells = $(selectedCell).parent('tr').children();
var normalIndex = allCells.index($(selectedCell));
var nonColSpanIndex = 0;


allCells.each(
    function (i, item) {
        if (i == normalIndex)
            return false;

        var colspan = $(selectedCell).attr('colspan');
        colspan = colspan ? parseInt(colspan) : 1;
        nonColSpanIndex += colspan;
    }
    );

return nonColSpanIndex;
};


}
);

Show/ Hide Table Column with colspan using jQuery

4 Answers4

Linked