Выделение нескольких строк таблицы

Question

Подскажите пожалуйста как можно реализовать выделение строк в таблице, как тут пример в примере №1 "Simple data range picker with a callback". То есть мы кликаем на строку таблицы она выделяется цветом после чего при движении мышки по строкам таблицы они так же выделяются цветом пока не будет выбрана еще одна строка. Все строки между первой и второй должны иметь один цвет соответсвенно.

Ниже приведу свой код, но он работает некорректно. Если мышкой нажать на строку, уйти за границу таблицы и нажать на другую строку, то строки между ними не будут выделены. Подскажите, как можно это исправить и в правильном ли направлении вообще думаю. Заранее спасибо!

Мой код

$(document).ready(function() {
  $(".color_table tr").hover(function() {
    $(this).addClass("hover_color")
  }, function() {
    $(this).removeClass("hover_color")
  });


  $(".color_table tr").click(function() {
    $(this).toggleClass("click_color");

    $(".color_table tr").mouseover(function() {
      $(this).toggleClass("hover_color2");
    });

    $(".color_table tr").click(function() {
      $(this).removeClass("hover_color2");
      $(this).addClass("click_color");
      return;
    });
  });

});

.alternate_color {
  background-color: #f5f5dc;
}

.color_table {
  border: 1px solid black;
  border-collapse: collapse;
  margin: 0 auto;
}

.color_table th,
.first_tr {
  background-color: #aaddee;
}

.hover_color {
  background-color: #ffff00 !important;
}

.click_color {
  background-color: #90ee90 !important;
}

.hover_color2 {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<table class="color_table">
  <tr class="first_tr">
    <th style="width: 25px;"></th>
    <th style="width: 150px;">Первый столбец</th>
    <th style="width: 150px;">Второй столбец</th>
  </tr>
  <tr class="alternate_color">
    <th>1)</th>
    <td>Значение №1</td>
    <td>Значение №2</td>
  </tr>
  <tr>
    <th>2)</th>
    <td>Значение №3</td>
    <td>Значение №4</td>
  </tr>
  <tr class="alternate_color">
    <th>3)</th>
    <td>Значение №5</td>
    <td>Значение №6</td>
  </tr>
  <tr>
    <th>4)</th>
    <td>Значение №7</td>
    <td>Значение №8</td>
  </tr>
  <tr class="alternate_color">
    <th>5)</th>
    <td>Значение №9</td>
    <td>Значение №10</td>
  </tr>
</table>

БЛОГ НА HUSL

Выделение нескольких строк таблицы

Ответы (0 шт):