Geek Answers Handbook

Show / hide table column with colspan using jQuery

I have an 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 a colgroup named "Associate Info" (including row information) using the "Show Associate" and "Hide Associate" buttons.

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

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

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

Link

Selected answer

enter image description here

+6
jquery html css
source share
4 answers

I summarized the idea provided by @Pioul. Therefore, please support @Pioul as well if you like this answer. This generic approach is available at http://jsfiddle.net/Lijo/UqdQp/10/

Literature:

  • Finding a column index using jQuery when a table contains cells overlapping columns

  • Select table cells based on the value in the cell

THE 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; }; } );
+1
source share

Hi now used to do this

JQuery

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

and some changes in your html

Live demo

+2
source share

Or you can use the 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(); } });
+2
source share

Here, while working with your current HTML, and continue to work if the Associate Info header stores more columns (the script looks for its colspan attribute to get 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

+2
source share

More articles:


All Articles