Использование CSS-перехода и переключения классов для отображения / скрытия строк таблицы

Question

Использование CSS-перехода и переключения классов для отображения / скрытия строк таблицы

Как будто вы пытаетесь получить доступ к объекту, который является null. Рассмотрим ниже пример:

TypeA objA;

. В это время вы только что объявили этот объект, но не инициализировали или не инициализировали. И всякий раз, когда вы пытаетесь получить доступ к каким-либо свойствам или методам в нем, он будет генерировать NullPointerException, что имеет смысл.

См. Также этот пример:

String a = null;
System.out.println(a.toString()); // NullPointerException will be thrown

0

javascript html css css3

задан EvilDr 11 April 2019 в 09:33

2 ответа

Другие вопросы по тегам:

javascript html css css3

Похожие вопросы:

score 0 · Answer 1

Лучший способ сделать это - поиграть с ростом и непрозрачностью. Но вы не можете установить высоту для элементов таблицы (tr / td)

, поэтому вот пример того, как сделать это только с CSS

#expand {
 /* hide the checkbox */
 display: none
}

label {
  /* style as a button (you can't use button inside label with for attribute) */
  padding: 2px 5px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 5px;
  font-size: .7rem;
  cursor: pointer;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table tr:nth-child(n+4)>td {
  padding: 0;
}

table tr:nth-child(n+4)>td>div {
  opacity: 0;
  max-height: 0;
  transition: all 250ms ease-in;
}

#expand:checked + table tr:nth-child(n+4)>td {
  padding: 1px;
  /* default */
}

#expand:checked + table tr:nth-child(n+4)>td>div {
  opacity: 1;
  /* try to use something just slightly above the true height */
  max-height: 20px;
  overflow: hidden;
  transition-timing-function: ease-out;
}

[ 111]

score 0 · Answer 2

Реализация моего комментария «вы можете использовать прозрачность для имитации затухания» на основе вашего кода Fiddle.

var theButton = document.getElementById("bar");
theButton.onclick = ShowHide;

function ShowHide() {
  var tables = document.getElementsByClassName('foo');
  for(i=0; i<tables.length; i++) {
  	tables[i].classList.toggle("hide");  
  }
}

td { border-bottom:1px solid #ccc; }

.foo tr:nth-child(n+4) {
  display: block;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}

.foo.hide tr:nth-child(n+4) {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.foo.gone tr:nth-child(n+4) {
  display: none;
}

<p>
 <input type="button" id="bar" value="Show/Hide" />
</p>

<h2>Table 1</h2>
<table class="foo hide">
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
</table>

<h2>Table 2</h2>
<table class="foo hide">
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
  <tr><td>Text</td></tr>
</table>

При желании вы можете включать в таблицы переходные события и события переходного периода, чтобы переключать класс .gone после Переход заканчивается, чтобы переключить их свойство отображения. Таким образом, вы можете сохранить такие вещи, как позиционирование, поскольку элементы с непрозрачностью 0 все равно будут занимать место на странице.