切换嵌套的表列 - html，jQuery

Question

我对jQuery相对较新，但使用html和css更加老练。

我目前正致力于创建一个显示带有季度结果的嵌套表格的新报告。Sample Quarterly Report 当用户点击Q1或Q2表格行旁边的img时 - 我的期望值是周（ wk 1 - wk n）列隐藏/显示（切换）为需要。 此外，当隐藏周列时，我希望Quartely列崩溃并动态显示隐藏周的总和（wk1 - wkn）。 大部分代码都是从其他帖子中借来的，但不幸的是，我无法找到一个崩溃并对嵌套列求和的内容。

提前感谢您的帮助！

＆＃13;

＆＃13;

$(document).ready(function () {
 
 var 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(function () {
         var combat1 = $(this).text();
         if (!isNaN(combat1) && combat1.length !== 0) {
             sum1 += parseFloat(combat1);
         }
     });
     var sum2 = 0;
     $('tr').find('.combat2').each(function () {
         var combat2 = $(this).text();
         if (!isNaN(combat2) && combat2.length !== 0) {
             sum2 += parseFloat(combat2);
         }
     });
     var sum3 = 0;
     $('tr').find('.combat3').each(function () {
         var combat3 = $(this).text();
         if (!isNaN(combat3) && combat3.length !== 0) {
             sum3 += parseFloat(combat3);
         }
     });

     $('.total-combat1').html(sum1);
     $('.total-combat2').html(sum2);
     $('.total-combat3').html(sum3);
     
     $('.header').click(function() {
                //$('td:nth-child(2)').hide();
                // if your table has header(th), use this
                $('td:nth-child(2),th:nth-child(2)').toggle();
            });
            
 });

＆＃13;

body {
    background: #80dfff;
    color: #d5d4d4;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 0;
    overflow-x: auto;
    padding: 30px;
}
table {
    background: white;
    border-collapse: collapse;
    border: 1px #393939 solid;
    color: black;
    margin: 1em 1em 1em 0;
}
thead {
    border-collapse: collapse;
    color: black;
}
th, td {
    border: 1px #aaa solid;
    padding: 0.2em;
}

＆＃13;

<table>
    <thead>
    <tr><th colspan=8>2015</th></tr>
    <tr><th colspan=4 class="header">Q1 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
        </th>
        <th colspan=3 class="header">Q2 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
       </th>
       
        <th></th>
    </tr>
        <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>WK4</th>
            
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="combat1">8170</td>
            <td class="combat1">6504</td>
            <td class="combat1">6050</td>
            <td class="combat1">6050</td>
            
            <td class="combat1">7050</td>
            <td class="combat1">7050</td>
            <td class="combat1">7050</td>
            
            <td class="total-combat1"></td>
        </tr>
        <tr>
            <td class="combat2">8500</td>
            <td class="combat2">10200</td>
            <td class="combat2">7650</td>
            <td class="combat2">7650</td>
            
            <td class="combat2">8650</td>
            <td class="combat2">8650</td>
            <td class="combat2">8650</td>
            
            <td class="total-combat2"></td>
        </tr>
        <tr>
            <td class="combat3">9185</td>
            <td class="combat3">5515</td>
            <td class="combat3">6185</td>
            <td class="combat3">7185</td>
            
            <td class="combat3">9185</td>
            <td class="combat3">9185</td>
            <td class="combat3">9185</td>
            
            <td class="total-combat3"></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您需要切换Q1或Q2的可见性，可以更改标题点击事件，以获得在以下代码段中产生的效果。

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

一种方法是使用jQuery :lt和:gt以及css

来限制所选的单元格

＆＃13;

＆＃13;

$(function () {
  var 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(function () {
    var combat1 = $(this).text();
    if (!isNaN(combat1) && combat1.length !== 0) {
      sum1 += parseFloat(combat1);
    }
  });
  var sum2 = 0;
  $('tr').find('.combat2').each(function () {
    var combat2 = $(this).text();
    if (!isNaN(combat2) && combat2.length !== 0) {
      sum2 += parseFloat(combat2);
    }
  });
  var sum3 = 0;
  $('tr').find('.combat3').each(function () {
    var combat3 = $(this).text();
    if (!isNaN(combat3) && combat3.length !== 0) {
      sum3 += parseFloat(combat3);
    }
  });

  $('.total-combat1').html(sum1);
  $('.total-combat2').html(sum2);
  $('.total-combat3').html(sum3);


  // The new header click event

  $('.header').click(function(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)';
    } else {
      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) {
      if (this.style.display == 'none') {
        isVisible = true;
        if ((index % everyTotIndex) == 0) {
          $(this).parent().find('td[colspan="' + everyTotIndex + '"], th[colspan="' + everyTotIndex + '"]').remove();
        }
        return '';
      }
      if ((index % everyTotIndex) == 0) {
        if (this.tagName.toLowerCase() == 'th') {
          $('<th colspan="' + everyTotIndex + '" class="total">Total</th>').insertBefore($(this));
        } else {
          $('<td colspan="' + everyTotIndex + '" class="combat1 total">0</td>').insertBefore($(this));
          var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]');
          obj.text(+obj.text() + parseInt(this.textContent));
        }
      } else {
        if (this.tagName.toLowerCase() == 'td') {
          var obj = $(this).parent().find('td[colspan="' + everyTotIndex + '"]');
          obj.text(+obj.text() + parseInt(this.textContent));
        }
      }
      return 'none';
    });
    if (isVisible) {
      $(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/minus.png");
    } else {
      $(this).find('img').attr('src', "http://www.unesco.org/ulis/imag/plus.png");
    }
  });
});

＆＃13;

body {
  background: #80dfff;
  color: #d5d4d4;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  overflow-x: auto;
  padding: 30px;
}
table {
  background: white;
  border-collapse: collapse;
  border: 1px #393939 solid;
  color: black;
  margin: 1em 1em 1em 0;
}
thead {
  border-collapse: collapse;
  color: black;
}
th, td {
  border: 1px #aaa solid;
  padding: 0.2em;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<table>
    <thead>
    <tr><th colspan=8>2015</th></tr>
    <tr><th colspan=4 class="header">Q1
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
    </th>
        <th colspan=3 class="header">Q2
            <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
        </th>

        <th></th>
    </tr>
    <tr>
        <th>WK1</th>
        <th>WK2</th>
        <th>WK3</th>
        <th>WK4</th>

        <th>WK1</th>
        <th>WK2</th>
        <th>WK3</th>
        <th>Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="combat1">8170</td>
        <td class="combat1">6504</td>
        <td class="combat1">6050</td>
        <td class="combat1">6050</td>

        <td class="combat1">7050</td>
        <td class="combat1">7050</td>
        <td class="combat1">7050</td>

        <td class="total-combat1"></td>
    </tr>
    <tr>
        <td class="combat2">8500</td>
        <td class="combat2">10200</td>
        <td class="combat2">7650</td>
        <td class="combat2">7650</td>

        <td class="combat2">8650</td>
        <td class="combat2">8650</td>
        <td class="combat2">8650</td>

        <td class="total-combat2"></td>
    </tr>
    <tr>
        <td class="combat3">9185</td>
        <td class="combat3">5515</td>
        <td class="combat3">6185</td>
        <td class="combat3">7185</td>

        <td class="combat3">9185</td>
        <td class="combat3">9185</td>
        <td class="combat3">9185</td>

        <td class="total-combat3"></td>
    </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我试图找出你想要做的事情......如果我错了，请纠正：你正在尝试切换下面的一组列，例如Q1，当你点击标题栏？如果是这样，这里是代码。我修改了你的代码，我添加到主表下的嵌套表来组织/划分两组信息，这样我就可以轻松地使用jQuery选择哪一个我要切换。

＆＃13;

＆＃13;

$(document).ready(function() {

  var 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(function() {
    var combat1 = $(this).text();
    if (!isNaN(combat1) && combat1.length !== 0) {
      sum1 += parseFloat(combat1);
    }
  });
  var sum2 = 0;
  $('tr').find('.combat2').each(function() {
    var combat2 = $(this).text();
    if (!isNaN(combat2) && combat2.length !== 0) {
      sum2 += parseFloat(combat2);
    }
  });
  var sum3 = 0;
  $('tr').find('.combat3').each(function() {
    var combat3 = $(this).text();
    if (!isNaN(combat3) && combat3.length !== 0) {
      sum3 += parseFloat(combat3);
    }
  });


  $('.header-1').click(function() {
    $("#table1").toggle();
  });

  $('.header-2').click(function() {
    $("#table2").toggle();
  });

});

＆＃13;

body {
  color: #d5d4d4;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  overflow-x: auto;
  padding: 30px;
}
table {
  background: white;
  border-collapse: collapse;
  border: 1px #393939 solid;
  color: black;
  margin: 0;
  padding: 0;
}
thead {
  border-collapse: collapse;
  color: black;
}
th,
td,
tr {
  border: 1px #aaa solid;
  padding: 0;
}
td.combat {
  padding: 0.2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th colspan=2>2015</th>
    </tr>
    <tr>
      <th class="header-1">Q1
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
      <th class="header-2">Q2
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table id="table1">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>WK4</th>
          </tr>
          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>

          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>
        </table>
      </td>
      <td>
        <table id="table2">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;