Расширение строки таблицы с помощью jQuery в таблице div css

Мне нужно создать список людей с базовой информацией о таблице, например, с именем, и когда кто-то щелкает строку, он будет отображать детали между строкой, по которой щелкнули, и следующей.

Более наглядный пример см. в разделе jExpand подключаемый модуль jQuery, который делает именно это, но с обычной html-таблицей.

Вот jsfiddle с кодом

Моя цель - когда я нажимаю на имя Алисы, между Алисой и Бернардом создается новый div.

Этот новый div должен иметь ширину таблицы. И это большое дело. Нет colspan в таблице css.

Я думаю о фиктивной строке заполнителя со вторым абсолютным div сверху, но не могу придумать какой-либо элегантный способ сделать это.


jquery css css-tables
person Alexandre    schedule 27.10.2011    source источник
comment
Может быть, какой-то код javascript, который вы используете? Или ссылку jsfiddle.net?   -  person Beniamin    schedule 27.10.2011
comment
Просто интересно, почему ты не пользуешься столом?   -  person Richard Dalton    schedule 27.10.2011
comment
Yhea забыл упомянуть об этом. Я дал вам облегченную версию здесь. Но очевидно у меня в ней еще много чего и это не таблица в смысле табличного отображения данных. Например, в каждой строке у меня есть панель навигации и некоторая информация о состоянии. Я мог бы использовать таблицу в абсолюте, но поскольку это будет только для строк, расходующих вещи, другие решения приветствуются.   -  person Alexandre    schedule 27.10.2011
comment
@AlexandreRavey Я не уверен, что это вообще возможно. Но удачи в поиске ответа. Я бы просто сдался и использовал таблицы :D   -  person Richard Dalton    schedule 28.10.2011
comment
@RichardD Вызов принят! :)   -  person Alexandre    schedule 28.10.2011

Ответы (3)


arrow_upward
0
arrow_downward

Что-то вроде этого? http://jsfiddle.net/95aZb/

person Johan    schedule 27.10.2011
comment
Скорее наоборот. Именно так: jankoatwarpspeed.com/examples/expandable-rows - person Alexandre; 27.10.2011
comment
Вот jsfiddle того, что я хочу сделать: jsfiddle.net/RMkav/2 увидеть проблему, нажав на Алису. - person Alexandre; 27.10.2011

arrow_upward
0
arrow_downward

Наконец-то придумали что-то не такое элегантное, но работающее.

Посмотреть этот jsFiddle (используйте кнопку "загрузить подробности", а затем нажмите строка)

Все еще есть некоторые недостатки, например, невозможность использовать jQuery slideToggle() вместо toggle(). Если у кого-нибудь есть решение, скользящее по элементу с абсолютно позиционированным дочерним элементом, дайте мне знать.

Я надеюсь, что это поможет кому-то еще :)

person Alexandre    schedule 28.10.2011
comment
Поздравляю с решением. Когда вы сможете, обязательно пометьте свой ответ как «принятый», чтобы другие могли учиться на вашем успехе. Ура~ - person Andrew Kozak; 21.12.2011

arrow_upward
0
arrow_downward

Это третий вопрос "css div table", с которым я столкнулся сегодня. Ответ "используйте таблицу".

создание того же самого с div в виде таблиц

как создать этот css?

person Curt    schedule 28.10.2011
comment
И я с вами согласен в том, что таблица делается для табличных данных и не везде можно использовать div только для того, чтобы использовать div вместо таблицы. Это действительно не простая таблица, состоящая всего из 4 столбцов, множество других вещей мешает мне перейти к настоящей таблице. Но даже после того, как я нашел решение (см. мой ответ), я думаю, что нужно решить множество других проблем, прежде чем подумать. - person Alexandre; 28.10.2011