使用 jQuery 使用 colspan 显示/隐藏表格列答案

【问题标题】：Show/ Hide Table Column with colspan using jQuery使用 jQuery 使用 colspan 显示/隐藏表格列
【发布时间】：2012-09-17 08:37:51
【问题描述】：

我有一个 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

参考：

选择答案

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

你好，现在习惯了

jQuery

$(document).ready(function(){

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



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

对您的 html 进行一些更改

Live demo

【讨论】：

它有效。但是，我将无法使用它。我正在使用 GridView 生成表格。将表列包装在表中可能不可行。你能推荐一个替代方案吗？

【解决方案2】：

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

【讨论】：

谢谢。我也尝试申请其他部分。那没有用。需要进行哪些更改才能使其正常工作？ jsfiddle.net/Lijo/auny3/9
@Lijo 在 else 语句中将 hide 更改为 show 并隐藏“关联信息”，在选择器中添加 th:nth-child(3):first。见This

【解决方案3】：

在这里，使用您当前的 HTML，如果您的 Associate 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

【讨论】：

你能解释一下它是如何工作的吗？我对“.add(label)”感到困惑
它将我们想要隐藏或显示的每个元素存储到associate 对象中。它首先存储第 1 到第 3 行中的第 1 到 4 列，然后将 (jQuery.add) 添加到这些元素的“关联信息”单元格中。这样，我们就可以在单个 jQuery 对象中使用我们想要使用的每个元素：associate.
谢谢。因此，您在上述说明中使用了基于零的索引。此外，变量名“label”可以重命名为“firstLine”。
我已经发布了一个通用的方法作为答案。请提供您的想法

【解决方案4】：

我已经概括了@Pioul 提供的想法。因此，如果您喜欢这个答案，也请为@Pioul 投票。这种通用方法可在http://jsfiddle.net/Lijo/UqdQp/10/

中找到

参考资料：

代码

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


}
);

【讨论】：