Mostrar/Ocultar columna de tabla con colspan usando jQuery

Question

Tengo una tabla HTML como se muestra en http://jsfiddle.net/Lijo/auny3/. La tabla tiene 10 columnas, divididas en tres grupos de columnas. Necesito ocultar/mostrar el colgroup llamado "Associate Info" (incluyendo sus datos de filas) usando los botones "Show Associate" y "Hide Associate".

¿Cuál es la mejor forma (en términos de rendimiento) para hacer esto usando jQuery?

Por favor, responda si tiene una respuesta mejor que http://jsfiddle.net/Lijo/auny3/8/

Nota: estoy generando la tabla utilizando ASP.Net GridView como se da en http://www.sacdeveloper.com/Community/Articles/tabid/86/ctl/ArticleView/mid/458/articleId/1/Group_columns_in_an_ASPNet_Gridview.aspx

Referencia:

1. http://jsfiddle.net/Lijo/auny3/8/

2. http://jsfiddle.net/Lijo/auny3/12/

3. http://jsfiddle.net/Lijo/auny3/11/

4. http://jsfiddle.net/Lijo/auny3/13/

respuesta seleccionada

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

Answer 1

He generalizado la idea proporcionada por @Pioul. Por lo tanto, vota por favor a @Pioul también si te gusta esta respuesta.Este enfoque generalizado está disponible en http://jsfiddle.net/Lijo/UqdQp/10/

Referencias:

1. Finding column index using jQuery when table contains column-spanning cells

2. Select table cells based on the value in the cell

CÓDIGO

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


} 
); 

Answer 2

Hola ahora se utiliza para este

Jquery

$(document).ready(function(){ 

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



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

y algunos cambios a su html

Live demo

Answer 3

O puede utilizar 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(); 
    } 
}); 

Answer 4

Aquí, trabajando con su código HTML actual, y seguirá trabajando si su Asociado información de la cabecera más columnas vez almacenados (el guión está buscando su colspan atributo a buscar el número apropiado de columnas).

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