table выделение столбца

table выделение столбца

by Сергей Тарасевич

HTML

<div class="tt_t">Кликаем по HEAD 1-5</div>

<table data-table="content">
  <thead>
    <tr>
      <th>HEAD 1</th>
      <th>HEAD 2</th>
      <th>HEAD 3</th>
      <th>HEAD 4</th>
      <th>HEAD 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CONTENT 1.1</td>
      <td>CONTENT 1.2</td>
      <td>CONTENT 1.3</td>
      <td>CONTENT 1.4</td>
      <td>CONTENT 1.5</td>
    </tr>
    <tr>
      <td>CONTENT 2.1</td>
      <td>CONTENT 2.2</td>
      <td>CONTENT 2.3</td>
      <td>CONTENT 2.4</td>
      <td>CONTENT 2.5</td>
    </tr>
    <tr>
      <td>CONTENT 3.1</td>
      <td>CONTENT 3.2</td>
      <td>CONTENT 3.3</td>
      <td>CONTENT 3.4</td>
      <td>CONTENT 3.5</td>
    </tr>
    <tr>
      <td>CONTENT 4.1</td>
      <td>CONTENT 4.2</td>
      <td>CONTENT 4.3</td>
      <td>CONTENT 4.4</td>
      <td>CONTENT 4.5</td>
    </tr>
    <tr>
      <td>CONTENT 5.1</td>
      <td>CONTENT 5.2</td>
      <td>CONTENT 5.3</td>
      <td>CONTENT 5.4</td>
      <td>CONTENT 5.5</td>
    </tr>
  </tbody>
</table>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.tt_t {
  font-family: Arisl;
  font-size: 24px;
  line-height: 30px;
  padding: 20px;
  text-align: center;
}

table {
  border: 1px solid #0e3f86;
  border-bottom: 0 solid transparent;
  border-right: 0 solid transparent;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: Arial;
  font-size: 14px;
  width: 100%;
  max-width: 100%;
}

table thead tr,
table tbody tr {
  border-bottom: 1px solid #0e3f86;
}

table tbody tr:nth-child(even) {
  background: #d7e3f9;
}

table thead tr th,
table tbody tr td {
  border-right: 1px solid #0e3f86;
  text-align: center;
}

table thead tr th {
  background: #7197de;
  color: #ffffff;
  cursor: pointer;
  padding: 10px;
}

table tbody tr td {
  padding: 5px 10px;
}

table thead tr th.active {
  background: #34cdce;
}

table tbody tr td.active {
  background: rgba(52, 205, 206, 0.5);
}

JavaScript

function table_start() {
  var a = $('[data-table="content"]');
  $('thead tr th', a).each(function() {
    $(this).on('click', function() {
      $('[data-table="content"] thead tr th, [data-table="content"] tbody tr td').removeClass('active');
      $(this).addClass('active');

      var a = 0,
        b = 0;
      $('th', $('[data-table="content"] thead tr')).each(function() {
        if ($(this).hasClass('active') && b == 0) {
          a += 1;
          b += 1;
        } else if (b == 0) {
          a += 1;
        }

      });
      a = a - 1;
      $('tr', '[data-table="content"] tbody').each(function() {
        $('td:eq( ' + a + ' )', this).addClass('active');
      });
    });
  });
};
$(document).ready(function() {
  table_start();
});