<!--HTML-->
<table id="grid">
    <thead>
      <tr>
        <th data-type="string" class="aktiv">Фамилия</th>
        <th data-type="string">Имя</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="bykva">А</td>
        <td class="bykva1">А</td>
      </tr>
      <tr>
        <td class="perv">Абон</td>
        <td class="vtor">Вася</td>
      </tr>
      <tr>
        <td class="perv">Аксель</td>
        <td class="vtor">Петя</td>
      </tr>
      <tr>
        <td class="bykva">Б</td>
        <td class="bykva1">Б</td>
      </tr>
      <tr>
        <td class="perv">Бек</td>
        <td class="vtor">Женя</td>
      </tr>
      <tr>
        <td class="bykva">В</td>
        <td class="bykva1">В</td>
      </tr>
      <tr>
        <td class="perv">Варрис</td>
        <td class="vtor">Маша</td>
      </tr>
      <tr>
        <td class="bykva">Г</td>
        <td class="bykva1">Г</td>
      </tr>
      <tr>
        <td class="perv">Грид</td>
        <td class="vtor">Илья</td>
      </tr>
      <tr>
        <td class="perv">Гаррид</td>
        <td class="vtor">Анн</td>
      </tr>
    </tbody>
  </table>
<style>
#grid th {
  background: rgba(5, 23, 67, 0.79) none repeat scroll 0 0;
  color: #ccc3a4;
  padding: 10px;
  text-transform: uppercase;
      cursor: pointer;
}
.aktiv {
  background: rgba(5, 23, 67, 0.79) url("https://forumstatic.ru/files/000d/b2/37/75913.png") no-repeat scroll right 12px center / 12px auto !important;
  color: #fff !important;
}
.bykva, .bykva1 {
  background: rgba(164, 160, 142, 0.4) none repeat scroll 0 0;
  font-weight: bold;
}
  </style>

<script>
$(document).ready(function() {
$("#grid th").click(function() {
    $("#grid th").removeClass("aktiv");
    $(this).addClass("aktiv");
});
      return false; });
</script>


  <script>
    var grid = document.getElementById('grid');

    grid.onclick = function(e) {
      if (e.target.tagName != 'TH') return;

      // Если TH -- сортируем
      sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
    };

    function sortGrid(colNum, type) {
      var tbody = grid.getElementsByTagName('tbody')[0];

      // Составить массив из TR
      var rowsArray = [].slice.call(tbody.rows);

      switch (type) {
        case 'string':
          compare = function(rowA, rowB) {
            return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
          };
          break;
      }

      // сортировать
      rowsArray.sort(compare);

      // Убрать tbody из большого DOM документа для лучшей производительности
      grid.removeChild(tbody);

      // добавить результат в нужном порядке в TBODY
      // они автоматически будут убраны со старых мест и вставлены в правильном порядке
      for (var i = 0; i < rowsArray.length; i++) {
        tbody.appendChild(rowsArray[i]);
      }

      grid.appendChild(tbody);

    }
  </script>