Как засунуть tr в div?

Question

[Антон Рейтаровский]

Здравствуйте. Есть у меня такой DOM

<table>
<tbody>
<tr class="first-class">...</tr>
<tr class="second-class">...</tr>
<tbody>
</table>

Мне нужно строки с классом second-class во что нибудь обернуть, чем можно обернуть? div-ом не получается.

Comments

[iBird Rose]

никак. структуру таблицы изменить нельзя.

[Igor Koch]

Зачем оборачиавть?

[Владимир]

Да-да. Поясните смысл сего действа. Уверен, что можно обойтись и без такой экзотики, как оборачивание tr в div...

[Антон Рейтаровский]

Владимир: У меня строки с классом second-class скрытые, при клике на строку с классом first-class, строки second-class разворачиваются, и проблема в том что строк second-class может быть 1000+, из-за этого они долго разворачиваются, и я хотел их во что нибудь обернуть чтобы скрывать не строки, а элемент со строками

[tef]

и я хотел их во что нибудь обернуть чтобы скрывать не строки, а элемент со строками

Около минуты пытался понять, что это значит. Но так и не понял, что если это было бы даже гипотетически возможно, то как бы это ускорило разворачивание строк?

[Владимир]

tef: Логика понятна: при разворачивании строк под капотом всё равно работает цикл. Развернуть один элемент быстрее, чем тысячу. Другое дело, что для свёртывания 1000 строк в один элемент понадобится тот же самый цикл...

Антон Рейтаровский: Антон, не нужно ничего оборачивать. Быстрее не будет. Если есть тормоза, то они не отсюда.

[tef]

Владимир: Смотря в какой ситуации. Если элементы подгружены заранее, то просто поменять dispaly. Второй вариант если они генерируются скриптом, третий аякс. В первых двух вариантах все развернется без тормозов. В третьем нужно ковырять или ставить анимацию на загрузку. Вообще, вопрос был в том, что бы именно развернуть, поэтом мы, скорее всего, имеем дело с первым вариантом.

А так, если очень хочется, то tr > td > table

[Антон Рейтаровский]

Владимир: Переделал структуру, обернул их в tbody, открывается моментально

Answer 1

[sim3x]

Никак

Браузер или выкинет див или произведет операции по превращению говнокода в корректный хтмл

Comments

[Антон Рейтаровский]

А чем можно обернуть?

[Растишка]

tbody может быть несколько, оберните в него

[sim3x]

Антон Рейтаровский: ничем

Сверстайте по человечески дивами все

Answer 2

[Stalker_RED]

Можно иметь более одного tbody.

Comments

[Антон Рейтаровский]

У меня и так несколько tbody, а tbody в tbody не запихнешь

[Stalker_RED]

Антон Рейтаровский: Тогда конец истории, потому что

Permitted parents <table>, <thead>, <tbody> or <tfoot> element

https://developer.mozilla.org/en-US/docs/Web/HTML/...

[Stalker_RED]

Антон Рейтаровский: Разве что какой-то хак с colgroup наворотить, но нужно экспериментировть.

Answer 3

[Ольга Ветер]

Если я правильно поняла вашу задачу, то подобное недавно делала без оборачивания. Не отрицаю, скорее всего решение убогое, но оно работает. Если сможете абстрагироваться от тематики ресурса, можете передрать https://mastervision.su/astrological/course.html#price

Answer 4

[Froggyweb]

Сделать вложенную таблицу.
Но лучше погуглить по запросу js grid

Answer 5

[ThunderCat]

проблема в том что строк second-class может быть 1000+, из-за этого они долго разворачиваются,

Они не из-за этого разворачиваются долго, а из-за того что это не табличная задача, перестройка таблицы на 1000 элементов само по себе задача нагруженная, а вы еще их туда-сюда вставляете в таблицу. Сверстайте по уму дивами и все будет работать быстро, див не требует соблюдения структуры табличной вложенности, по этому все будет отрабатывать быстрее в разы.