как вернуться к нормальному состоянию после отображения: нет для строки таблицы

Question

В основном у меня есть стол. При загрузке я установил для каждой строки таблицы значение display:none, поскольку у меня много обработки javascript, и я не хочу, чтобы пользователь видел ее во время выполнения. Я установил таймер для его отображения через некоторое время, моя проблема в том, что я не могу заставить строку таблицы отображаться как строка таблицы. Если бы я установил display:block, он бы просто не совпадал с заголовками (th). Единственное решение, которое я нашел, это display: table-row от css2, но то есть 7 и ниже не поддерживают это объявление.

Любое решение?

Answer 1

установить отображение на пустую строку - это позволит строке использовать ее значение отображения по умолчанию и поэтому работает во всех браузерах

Answer 2

IE7 и ниже используйте display: block для элементов таблицы;другие браузеры правильно используют table-row, table-cell и т. д.

В то время как вы можете browser-sniff и выбираете разные значения отображения, гораздо проще косвенно скрыть строку.Добавьте правило таблицы стилей, например:

.hidden { display: none; }

, а затем измените className элемента строки, чтобы включить или не включить класс hidden.Когда класс удаляется, стиль display возвращается к значению по умолчанию, в зависимости от того, что находится в текущем браузере.

Вы также можете использовать селекторы содержимого, чтобы скрыть несколько элементов внутри одного элемента, а затем сделать ихвсе видны / скрыты сразу при смене одного класса.Это быстрее, чем обновлять каждый style в отдельности.

У меня много обработки javascript, и я не хочу, чтобы пользователь видел ее во время выполнения.

Они вообще не будут так или иначе.Изменения обычно не отображаются на экране, пока управление не передается из вашего кода обратно в браузер.

Answer 3

Используйте видимость вместо дисплея для вашего случая.

видимость: скрыто;

после загрузки

видимость: видимая;

узнать больше здесь

Answer 4

Восстановить значение по умолчанию:

display: unset;

Answer 5

Почему бы вам не поместить таблицу в div, настроить отображение этого div на none, а когда обработка будет завершена, установить отображение div обратно на block или inline block или что вам там нужно ... .

Answer 6

Может быть, это не везде применимо, но ...
Используйте родительский элемент (например, <div> или что-то еще) с требуемым дисплеем и установите для дисплея значение inherit на шоу. вот так:

function toggleDisplay(){
  $('#targetElement').toggleClass('hide');
  $('#targetElement').toggleClass('show');
}

#targetElement{
  width:100px;
  height:100px;
  background-color:red;
}

.hide{
  display:none;
}

.show{
  display:inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="intermediateElement" style="display:inline-block">
  <div id="targetElement" class="show"></div>
</div>

<button onclick="toggleDisplay()">Toggle</button>

Answer 7

При переключении между скрытием и отображением ТР с использованием toggleClass, будет работать следующее:

display:none;

и

display: table-row;

Например

$('#the_tr_id').toggleClass('tr_show','tr_hide');

Где:

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}