Afficher / masquer la colonne d’un tableau avec colspan à l’aide de jQuery

J’ai un tableau HTML comme indiqué dans http://jsfiddle.net/Lijo/auny3/ . Le tableau comporte 10 colonnes – divisées en trois groupes de colonnes. Je dois masquer / afficher le groupe de colonnes nommé «Informations sur l’associé» (y compris les données de ses lignes) à l’aide des boutons «Afficher l’associé» et «Masquer l’associé».

Quel est le meilleur moyen (en termes de performances) de le faire avec jQuery?

S’il vous plaît répondez si vous avez une meilleure réponse que http://jsfiddle.net/Lijo/auny3/8/

Remarque: je génère la table à l’aide de ASP.Net GridView, comme indiqué à l’ adresse http://www.sacdeveloper.com/Community/Articles/tabid/86/ctl/ArticleView/mid/458/articleId/1/Group_columns_in_an_AS_NetPlan_Greenview.aspx

Référence :

http://jsfiddle.net/Lijo/auny3/8/
http://jsfiddle.net/Lijo/auny3/12/
http://jsfiddle.net/Lijo/auny3/11/
http://jsfiddle.net/Lijo/auny3/13/

Réponse sélectionnée

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

entrez la description de l'image ici

Bonjour maintenant habitué à cela

Jquery

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

et certains changements à votre html

Démo en direct

Ou vous pouvez utiliser nth-child sélecteur nth-child :

 $('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(); } });

Ici, vous travaillerez avec votre code HTML actuel et continuerons de fonctionner si votre en-tête Associate Info stocke plus de colonnes (le script recherche son atsortingbut colspan pour extraire le nombre approprié de colonnes).

 $("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

J’ai généralisé l’idée fournie par @Pioul. Par conséquent, s’il vous plaît, votez pour @Pioul également si vous aimez cette réponse. Cette approche généralisée est disponible dans http://jsfiddle.net/Lijo/UqdQp/10/

Références:

Recherche d’un index de colonne à l’aide de jQuery lorsque la table contient des cellules couvrant des colonnes
Sélectionner des cellules de tableau en fonction de la valeur dans la cellule

CODE

 var associateStartElementSsortingng = "EmpID"; var financialStartElementSsortingng = "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, associateStartElementSsortingng); $('.btnAssociate').show(); }); //Financial Hide $('.financialHide').live("click", function (e) { e.preventDefault(); var hideClass = financialHideClass ; financialHTMLElements = HideSection(hideClass, financialStartElementSsortingng); $('.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, startElementSsortingng) { var htmlElement = GetTableSections(hideClass, startElementSsortingng); 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 ($.sortingm($(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; }; } );