Javascript 切换嵌套表列-html、jQuery

Javascript 切换嵌套表列-html、jQuery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对jQuery比较陌生,但对使用html和css更熟悉 我目前正在创建一个新的报告,该报告显示一个包含季度结果的嵌套表。 当用户单击Q1或Q2表格行旁边的img时,我的期望是根据需要隐藏/显示(切换)本周(wk1-wkn)列。 此外,当隐藏周列时,我希望四次列折叠并动态显示隐藏周(wk1-wkn)的总和。 大多数代码都是从其他文章中借用的,但不幸的是,我找不到一个可以折叠和求嵌套列的总和的代码 提前感谢您的帮助 $(文档).ready(函数(){ 变量mImg=”http://t1.gsta

我对jQuery比较陌生,但对使用html和css更熟悉

我目前正在创建一个新的报告,该报告显示一个包含季度结果的嵌套表。 当用户单击Q1或Q2表格行旁边的img时,我的期望是根据需要隐藏/显示(切换)本周(wk1-wkn)列。 此外,当隐藏周列时,我希望四次列折叠并动态显示隐藏周(wk1-wkn)的总和。 大多数代码都是从其他文章中借用的,但不幸的是,我找不到一个可以折叠和求嵌套列的总和的代码

提前感谢您的帮助

$(文档).ready(函数(){
变量mImg=”http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
var pImg=”http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";
var-sum1=0;
$('tr').find('.combat1').each(函数(){
var combat1=$(this.text();
如果(!isNaN(战斗1)&&combat1.length!==0){
sum1+=parseFloat(战斗1);
}
});
var-sum2=0;
$('tr').find('.combat2').each(函数(){
var combat2=$(this.text();
如果(!isNaN(combat2)&&combat2.length!==0){
sum2+=parseFloat(战斗2);
}
});
var-sum3=0;
$('tr').find('.combat3').each(函数(){
var combat3=$(this.text();
如果(!isNaN(combat3)&&combat3.length!==0){
sum3+=parseFloat(战斗3);
}
});
$('.total-combat1').html(sum1);
$('.total-combat2').html(sum2);
$('.total-combat3').html(sum3);
$('.header')。单击(函数(){
//$('td:nth child(2)').hide();
//如果您的表有标题(th),请使用此
$('td:nth child(2),th:nth child(2)')。toggle();
});
});
正文{
背景#80dfff;
颜色:#D5D4;
字体系列:Helvetica、Arial、无衬线字体;
字体大小:12px;
保证金:0;
溢出-x:自动;
填充:30px;
}
桌子{
背景:白色;
边界塌陷:塌陷;
边框:1px#3939实心;
颜色:黑色;
保证金:1em 1em 1em 0;
}
泰德{
边界塌陷:塌陷;
颜色:黑色;
}
th,td{
边框:1px#aaa实心;
填充:0.2米;
}

2015
Q1
问题2
WK1
WK2
WK3
WK4
WK1
WK2
WK3
全部的
8170
6504
6050
6050
7050
7050
7050
8500
10200
7650
7650
8650
8650
8650
9185
5515
6185
7185
9185
9185
9185

如果需要切换Q1或Q2的可见性,可以更改标题单击事件,以获得以下代码片段中产生的效果

问题是选择您感兴趣的所有单元格,然后切换可见性

一种方法是限制使用jQuery和

$(函数(){
变量mImg=”http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
var pImg=”http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";
var-sum1=0;
$('tr').find('.combat1').each(函数(){
var combat1=$(this.text();
如果(!isNaN(战斗1)&&combat1.length!==0){
sum1+=parseFloat(战斗1);
}
});
var-sum2=0;
$('tr').find('.combat2').each(函数(){
var combat2=$(this.text();
如果(!isNaN(combat2)&&combat2.length!==0){
sum2+=parseFloat(战斗2);
}
});
var-sum3=0;
$('tr').find('.combat3').each(函数(){
var combat3=$(this.text();
如果(!isNaN(combat3)&&combat3.length!==0){
sum3+=parseFloat(战斗3);
}
});
$('.total-combat1').html(sum1);
$('.total-combat2').html(sum2);
$('.total-combat3').html(sum3);
//新标题单击事件
$('.header')。单击(函数(e){
var isVisible=false;
var strSelector='';
var everyTotIndex=4;
if(this.innerText.trim()==“Q1”){
everyTotIndex=4;
strSelector='td:not([colspan=“4”]):lt(4),th:not([colspan=“4”]):lt(4)';
}否则{
everyTotIndex=3;
strSelector='td:not([colspan=“3”):lt(7):gt(3),th:not([colspan=“3”):lt(7):gt(3)';
}
$(this).parents('table').find('tr:eq(2),tbody>tr').find(strSelector).css('display',function(index,value){
如果(this.style.display=='none'){
isVisible=true;
如果((索引%everyTotIndex)==0){
$(this.parent().find('td[colspan=“”+everyTotIndex+”],th[colspan=“”+everyTotIndex+”).remove();
}
返回“”;
}
如果((索引%everyTotIndex)==0){
如果(此.tagName.toLowerCase()=='th'){
$('Total').insertBefore($(this));
}否则{
$('0').insertBefore($(this));
var obj=$(this.parent().find('td[colspan=“”+everyTotIndex+”);
text(+obj.text()+parseInt(this.textContent));
}
}否则{
如果(此.tagName.toLowerCase()=='td'){
var obj=$(this.parent().find('td[colspan=“”+everyTotIndex+”);
text(+obj.text()+parseInt(this.textContent));
}
}
返回“无”;
});
如果(可见){
$(此)。查找('i