单击表标题下的所有单元格的颜色

Question

我有这张桌子：

Get-ADUser -SearchBase "OU=users,OU=company,DC=blah,DC=blah,DC=com" -Filter * -Properties * |
    Format-Table name, l, physicaldeliveryofficename

当用户点击标题时，让我们说，当点击Mon时，我想改变其下所有单元格的颜色（标题Mon下的整个列）。

我怎样才能做到这一点。

谢谢！

Answer 1

很简单，您需要设置类或数据属性并监听点击。这是一个有效的例子。

＆＃13;

＆＃13;

$('.day').on('click', function() {
  var $this = $(this);
  var elem;
  var dataId;

  $this.toggleClass('active');

  dataId = $this.data('id');
  elem = $('#body-table').find('td');

  elem.each(function() {
    tdDataId = $(this).data('id');
    if (dataId == tdDataId) {
      $(this).toggleClass('selected');
    }
  })
});

＆＃13;

#header-table {
  cursor: pointer;
}
#header-table .day.active {
  background: #1abc9c;
}
#body-table td.selected {
  background: #bdc3c7;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">

  <thead id="header-table">
    <tr>
      <th data-id="sunday" class="day sunday">Sunday</th>
      <th data-id="monday" class="day monday">Monday</th>
      <th data-id="tuesday" class="day tuesday">Tuesday</th>
    </tr>
  </thead>

  <tbody id="body-table">
    <tr>
      <td data-id="sunday">07:00</td>
      <td data-id="monday">07:00</td>
      <td data-id="tuesday">07:00</td>
    </tr>
    <tr>
      <td data-id="sunday">08:00</td>
      <td data-id="monday">08:00</td>
      <td data-id="tuesday">08:00</td>
    </tr>
    <tr>
      <td data-id="sunday">09:00</td>
      <td data-id="monday">09:00</td>
      <td data-id="tuesday">09:00</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;