javascript - HTML/Javascript 使用行标题折叠列

Question

当单击它们上面的列跨度时，我试图让许多列折叠/隐藏，只留下“总计”列。单击“AUD - API Sandbox213”区域时需要隐藏所有日期列。我目前所拥有的只是以下内容，甚至不确定我是否朝着正确的方向前进。

$(document).ready(function(e) {
  $('.collapseColumn').click(function() {
    $(this).parent()
      .parent()
      .next('thead')
      .toggleClass('collapsedColumn');
  });
});

.collapsedColumn {
  display: none;
}

<thead>
<tr>
<th></th>
<th colspan="dynamic to the number of months displayed"class="collapseColumn"</th>
<th></th>
<th colspan="1"></th>
</tr>
</thead>

<thead>
<tr>
<th></th>
<th>Month</th>  // multiplied by the number of months displayed
<th>Spacer</th> // multiplied by the number of months displayed
<th></th>
</tr>
</thead>

<thead>
<tr>
<th></th>
<th>Month Value</th> // multiplied by the number of months displayed
<th>Spacer</th>      // multiplied by the number of months displayed
<th>Total</th>
</tr>
</thead>

所有代码所做的只是隐藏日期，我还需要隐藏值，只留下“总计”列。任何帮助将不胜感激。

Answer 1

这是您尝试解决的问题的工作代码: http://jsfiddle.net/ruz4vobe/15/

我希望我能很好地理解你的问题，这就是你试图实现的目标......

我举了一个例子只是为了向您展示应该如何思考这个问题。你的方法不好。

<table>
  <thead>
    <tr>
      <th colspan="7" class="collapseColumn">AUD - API Sandbox 123</th>
    </tr>
    <tr>
      <th class="toHide">Jul'18</th>
      <th class="toHide">Jul'18</th>
      <th class="toHide">Jul'18</th>
      <th class="toHide">Jul'18</th>
      <th class="toHide">Jul'18</th>
      <th class="toHide">Jul'18</th>
      <th class="total">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="toHide">0</td>
      <td class="toHide">1</td>
      <td class="toHide">2</td>
      <td class="toHide">3</td>
      <td class="toHide">4</td>
      <td class="toHide">5</td>
      <td class="total">15</td>
    </tr>
  </tbody>
</table>

首先，您必须指定要隐藏的字段。您可以使用 HTML5 中的类或数据属性或任何您想要的方式来完成此操作，即使使用 CSS，如果 tr 的 last-child() 始终是您的总计

$('body').on('click', '.collapseColumn', function(e){
  $.each($(".toHide"), function() {
    $(this).toggleClass("hidden");
  });
});

当您单击应触发事件的 .collapseColumn 字段时，您可以在其中检查要尝试修改的所有字段。如果字段的值/数据内容/类等不符合您的要求，您只需使用类隐藏它，当您单击 .collapseColumn 时即可切换该类。