使用jQuery显示/隐藏表列与colspan [英] Show/ Hide Table Column with colspan using jQuery

问题描述

我有一个HTML表格，如中找到

参考资料：

1. Finding列索引




2. 根据单元格中的值选择表格单元格

<

  var associateStartElementString =EmpID; 
 var financialStartElementString =Type; 
 
 var associateHTMLElements; 
 var financialHTMLElements; 
 
 var associateHideClass ='.tableColGroupAssociate'; 
 var financialHideClass ='.tableColGroupTransaction'; 
 
 $（document）.ready（function（）{
 
 
 
 ////////隐藏节
 
 
 //关联隐藏
 $（'。associateHide'）。live（click，function（e）{
 e.preventDefault（）; 
 
 
 VAR hideClass = associateHideClass; 
 associateHTMLElements = HideSection（hideClass，associateStartElementString）; 
 
 $（'。btnAssociate）显示（）; 
 
}）; 
 
 //财务隐藏
 $（'。financialHide'）。live（click，function（e）{
 e.preventDefault 
 
 VAR hideClass = financialHideClass; 
 
 financialHTMLElements = HideSection（hideClass，financialStartElementString）; 
 
 $（'。btnFinancial）显示（）; 
 
}）; 
 
 
 //// SHOW 
 $（'。btnAssociate'）。click（function（）
 { 
 associateHTMLElements.show（）; 
 
变种firstHeaderLineElement = $（resultGridTable）找到（associateHideClass）; 
 
 firstHeaderLineElement.show（）; 
 
}）; 
 
 
 $（'。btnFinancial'）click（function（）
 {
 financialHTMLElements.show 
 
 var firstHeaderLineElement = $（。resultGridTable）。find（financialHideClass）; 
 
 firstHeaderLineElement.show（）; 
 
}） 
 
 
 
 //函数1 
函数HideSection（hideClass，startElementString）
 {
 
 var htmlElement = GetTableSections ，startElementString）; 
 
 var firstHeaderLineElement = $（。resultGridTable）。find（hideClass）; 
 
 var variableToSet; 
 
 if（！（htmlElement === undefined））{
 
 variableToSet = htmlElement; 
 htmlElement.hide（）; 
 firstHeaderLineElement.hide（）; 
} 
 
 return variableToSet; 
} 
 
 
 //函数2 
函数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; 
 
} 
 
 
} 
 
 //函数3 
函数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; 
} $ b b）; 
 
 return nonColSpanIndex; 
}; 
 
 
} 
）; 
  

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:

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/

Selected Answer

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

解决方案

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:

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


}
);

这篇关于使用jQuery显示/隐藏表列与colspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！