Как скрыть элемент в html таблицах

Question

Я создал html таблиц, в которых есть 2 строки, я хотел бы делать вторые строки, пока он не будет нажат.

Так что мой желаемый результат такой. Это initial appearence

И когда я нажимаю на ячейки 3, это ячейки want to be like this.

Когда я попробовал ниже работает, я не мог скрыть 2nd row, Если у кого-то есть мнение, пожалуйста, дайте мне знать.

Спасибо

$(function() {
  $("td").click(function() {
    $("tr .color").removeClass("aqua");
    index = $("td").index(this);
    $("tr .color").slice(index+1, index + 4).each(function() {
      $(this).addClass('aqua');
    });
  });
});

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  border: solid black 1px;
  cursor: pointer;
}

.aqua{
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
  </tr>
</table>

Answer 1

скрыть по умолчанию вторую строку, затем добавить класс (например, show) в эту строку при событии щелчка

$(function() {
  $("td").click(function() {
    $("tr .color").removeClass("aqua");
    index = $("td").index(this);
    $("tr .color").slice(index+1, index + 4).each(function() {
      $(this).addClass('aqua');
    }).parent().addClass('show');
  });
});

table {
  border-collapse: collapse;
}

tr:nth-child(2):not([class]) {
  display: none;
}

td {
  padding: 5px;
  border: solid black 1px;
  cursor: pointer;
}

.aqua{
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
  </tr>
</table>

Answer 2

Вы можете сделать это с помощью селектора :eq(), а также скрыть 2-ую строку по умолчанию, используя css :nth-child, например:

$(function() {
  $("td").click(function() {
    $("table tr:eq(1)").show();
    $("tr .color").removeClass("aqua");
    index = $("td").index(this);
    $("tr .color").slice(index + 1, index + 4).each(function() {
      $(this).addClass('aqua');
    });
  });
});

table {
  border-collapse: collapse;
}
tr:nth-child(2){
  display: none;
}
td {
  padding: 5px;
  border: solid black 1px;
  cursor: pointer;  
  width: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 25px;
}

.aqua {
  background-color: aqua;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
    <td class="color"></td>
  </tr>
</table>