Question

我们目前正在为客户开发一份内部报告，我无法解决这个问题......

我有一个HTML表，其中包含可变数量的列标题，然后是可变数量的数据行。表中的每一个都被分配了一个'td-Red''td-Green'或'td-Gray'的类。这可以控制单元格的颜色。

如果所有列的tds都有'td-Gray'类，我们希望隐藏整个列，包括标题。

我确信这可以用jQuery完成，但我没有这样做......

有人能帮忙吗？

Answer 1

循环标题，使用标题索引过滤每列中也具有灰色类的数据单元格。将该集合的长度与总行数进行比较并相应地隐藏

＆＃13;

var $dataRows = $('#myTable tbody tr'),
   rowCount = $dataRows.length;
   

$('#myTable thead th').each(function(i){
   var $greyCells = $dataRows.find('td:eq(' + i + ').td-Grey');
   if($greyCells.length === rowCount){
      $greyCells.add(this).hide();      
      console.log('Hiding column index = ',i)
   } 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="td-Grey">Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td class="td-Grey">Col 4</td>
    <td>Col 5</td>
  </tr>
  <tr>
    <td class="td-Grey">Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td class="td-Grey">Col 4</td>
    <td>Col 5</td>
  </tr>
  <tr>
    <td class="td-Grey">Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td class="td-Grey">Col 4</td>
    <td>Col 5</td>
  </tr>
  <tr>
    <td class="td-Grey">Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td class="td-Grey">Col 4</td>
    <td>Col 5</td>
  </tr>
  <tr>
    <td class="td-Grey">Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td class="td-Grey">Col 4</td>
    <td>Col 5</td>
  </tr>
</tbody>
</table>

＆＃13;

JQUERY - 根据单元格类

1 个答案: