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
– Rohit Azad Malik, Commented Sep 17, 2012 at 8:39

Rohit Azad Malik · Accepted Answer · 2012-09-17 08:49:59Z

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, 2012 at 8:49

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LCJ Over a year ago

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?

Alex Ball · Accepted Answer · 2012-09-17 09:02:59Z

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, 2012 at 9:02

Alex Ball

4,4842 gold badges20 silver badges23 bronze badges

2 Comments

LCJ Over a year ago

Thanks. I tried to apply to other section also. That didn't work. What need to be changed to make it work? jsfiddle.net/Lijo/auny3/9

Alex Ball Over a year ago

@Lijo in the else statement change hide to showand to hide the "Associate Info" add th:nth-child(3):first in the selectors. See This

aaaaaa · Accepted Answer · 2012-09-17 09:35:29Z

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, 2012 at 9:35

aaaaaa

2,6283 gold badges27 silver badges31 bronze badges

4 Comments

LCJ Over a year ago

Can you please explain how it works? I am confused about ".add(label)"

aaaaaa Over a year ago

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) to those elements the "Associate Info" cell. That way, we have every element we want to work with in a single jQuery object: associate.

LCJ Over a year ago

Thanks. So, you are using zero based indexing in the above explanation. Also, the variable name "label" can be renamed as "firstLine".

LCJ Over a year ago

I have posted a generalized approach as answer. Please provide your thoughts

Community · Accepted Answer · 2017-05-23 12:31:49Z

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;
};


}
);

Collectives™ on Stack Overflow

Show/ Hide Table Column with colspan using jQuery

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related