使用jQuery显示/隐藏带有colspan的表列
我有一个HTML表,如中所示。该表有10列–分为三个列组。我需要使用“show Associate”和“hide Associate”按钮隐藏/显示名为“Associate Info”的列组(包括其行数据) 使用jQuery执行此操作的最佳方式(性能方面)是什么 如果你有比我更好的答案,请回答 注意:我使用ASP.Net GridView生成表,如中所示 参考: 选定答案 嗨,现在习惯了 Jquery使用jQuery显示/隐藏带有colspan的表列,jquery,html,css,Jquery,Html,Css,我有一个HTML表,如中所示。该表有10列–分为三个列组。我需要使用“show Associate”和“hide Associate”按钮隐藏/显示名为“Associate Info”的列组(包括其行数据) 使用jQuery执行此操作的最佳方式(性能方面)是什么 如果你有比我更好的答案,请回答 注意:我使用ASP.Net GridView生成表,如中所示 参考: 选定答案 嗨,现在习惯了 Jquery $(document).ready(function(){ $("#show")
$(document).ready(function(){
$("#show").click(function(){
$("#showhide").show();
});
$("#hide").click(function(){
$("#showhide").hide();
});
})
以及对html的一些更改
或者您可以使用第n个子项选择器:
$('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();
}
});
这里,使用您当前的HTML,如果您的Associate Info标头存储了更多的列(脚本正在查找其
colspan
属性以获取适当的列数),则将继续工作
我概括了@Pioul提供的想法。因此,如果你喜欢这个答案,也请投@Pioul一票。此通用方法在中提供 参考资料: 代码
如果可以的话,你可以改变你的html吗?如果可以的话,你可以改变你的html吗。但是,我将无法使用它。我正在使用GridView生成表。将表列包装到表中可能不可行。你能推荐一个替代方案吗?谢谢。我也试着申请其他部门。那没用。为了让它工作,需要改变什么@else语句中的Lijo将
hide
更改为show
,并在选择器中添加th:n子项(3):first
,以隐藏“关联信息”。你能解释一下它是怎么工作的吗?我对“.add(label)”感到困惑。“add(label)”将我们要隐藏或显示的每个元素存储到关联对象中。它首先存储第1行到第3行的第1列到第4列,然后将()添加到这些元素的“associateinfo”单元格中。这样,我们就可以在一个jQuery对象中处理每个元素:associate
。谢谢。因此,在上面的解释中,您使用的是基于零的索引。另外,变量名“label”可以重命名为“firstLine”。我已经发布了一个通用方法作为答案。请提供您的想法
$("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();
});
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;
};
}
);