使用jQuery顯示/隱藏表格列與colspan使用jQuery

Question

我有一個HTML表格，如http://jsfiddle.net/Lijo/auny3/所示。該表有10列 - 分成三個列。我需要使用按鈕「Show Associate」和「Hide Associate」來隱藏/顯示名爲「Associate Info」的colgroup（包括其行數據）。

使用jQuery做這件事情的最佳方式是什麼（就性能而言）？

，如果你有比http://jsfiddle.net/Lijo/auny3/8/

注意一個更好的答案，請回答：我生成使用ASP.Net的GridView表中 http://www.sacdeveloper.com/Community/Articles/tabid/86/ctl/ArticleView/mid/458/articleId/1/Group_columns_in_an_ASPNet_Gridview.aspx

參考給出：

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/

選擇的答案

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

Answer 1

我有全身由@Pioul提供的想法。因此，如果你喜歡這個答案，請爲@Pioul註冊upvote。這個普遍的方法在http://jsfiddle.net/Lijo/UqdQp/10/

參考可用：

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

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

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


} 
); 

Answer 2

嗨，現在習慣了這種

jQuery的

$(document).ready(function(){ 

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



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

和一些零錢給你的HTML

Live demo

Answer 3

或者你可以使用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(); 
    } 
}); 

Answer 4

這裏，你目前的HTML工作，並會繼續工作，如果你的助理Info頭都保存更多的列（劇本正在尋找其colspan屬性，以獲取適當的列數）。

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