使用jQuery显示/隐藏表列与colspan [英] Show/ Hide Table Column with colspan using jQuery
问题描述
我有一个HTML表格,如中找到
参考资料:
<
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:
Selected Answer
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:
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屋!