Как правильно скрыть элемент в таблицах html - PullRequest
0 голосов
/ 08 апреля 2020

Я бы хотел по умолчанию за строкой 2 и, щелкая таблицы, он будет отображаться.

Когда я попробую свою работу, как показано ниже, строка 2 будет позади. но форма таблиц искажена.

Я бы хотел выровнять таблицы и за строкой 2 по умолчанию.

Как это исправить?

Почему эта таблица искажена?

Спасибо

$(function() {
  $("table").click(function() {
    $("table tr:eq(1)").toggleClass('show');
  });
});
td {
padding:5px;
border:solid black 1px;}

table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}

tr:nth-child(2):not([class]) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
  <th rowspan="2">header</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
    <tr>
  <th rowspan="2">header</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

1 Ответ

1 голос
/ 08 апреля 2020

Если вы хотите переключить строку, я предлагаю вам использовать концепцию «скрыть», а не «показывать».

Кроме того, избавьтесь от заголовка второй строки. Не уверен, зачем тебе это нужно, если ты занимаешь 2 строки.

$(() => {
  $('table').click(function(e) {
    $(this).find('tr:eq(1)').toggleClass('hide');
  });
});
table, th, td {
  border: solid black 1px;
}

table {
  border-collapse: collapse;
}

th, td {
  padding: 0.25em;
}

th {
  cursor: pointer
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead></thead>
  <tbody>
    <tr>
      <th rowspan="2">Header</th>
      <td>01</td>
      <td>02</td>
      <td>03</td>
      <td>04</td>
      <td>05</td>
    </tr>
    <tr class="hide">
      <td>06</td>
      <td>07</td>
      <td>08</td>
      <td>09</td>
      <td>10</td>
    </tr>
  </tbody>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...