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

Question

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

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

Answer 1

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

Answer 2

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

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

.hidden { display: none; }

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

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

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

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

Answer 3

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

display: unset;

Answer 4

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

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

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

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

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

Answer 5

Я знаю, что это старый вопрос, но я все еще здесь в поисках ответа на тот же вопрос.

Вы можете настроить отображение для элементов, отличных от таблицы, следующим образом:

 display: table;
 display: table-cell;
 display: table-column;
 display: table-colgroup;
 display: table-header-group;
 display: table-row-group;
 display: table-footer-group;
 display: table-row;
 display: table-caption;

Это работает с элементами таблицы. У меня была аналогичная проблема с<th> элемент, и зафиксировал его с помощью display : table-header-group;.

Я проверил результат в Chrome, Firefox, Safari, и он работает.

Вы можете прочитать больше здесь: https://css-tricks.com/almanac/properties/d/display/

Answer 6

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

Answer 7

Я не смог комментировать, что кажется контрпродуктивным. Ответ Рэя выше также устранил мою проблему. У меня был javascript, чтобы скрыть строки таблицы, где строка поиска не соответствует содержимому одной из ячеек.

В примере кода javascript, который я использовал, был display = "block" для строк, которые остаются отображаемыми (display = "none" для строк, которые нужно скрыть).

В результате моего поиска отображались только совпадающие строки, но потеряно форматирование таблицы, так что все TD работали вместе, а не форматировались в столбцы. Итак, таблица началась с правильных столбцов, но потеряла их, как только поиск изменил свойство отображения.

Простая замена display = "block" на display = "" исправила это.

Answer 8

Может быть, это не везде применимо, но...
Используйте родительский элемент (например, <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 9

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

display:none;

а также

display: table-row;

Например

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

Куда:

.tr_hide {
    display:none;
}

.tr_show {
    display: table-row;
}