1

Необходима простая реализация таблицы, с раскрывающимися строками при нажатии на строку/кнопку. Можно с использованием bootstrap. Посоветуйте пожалуйста какие-нибудь примеры реализации.

1 ответ 1

1

Скорее всего уже не актуально, но для будущих пользователей отвечу.

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

Есть второй способ реализации:

<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
    </tr>
    <tr >
        <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
    </tr>
    <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
        <td>2</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$11.00</td>
        <td class="text-error"></td>
        <td class="text-success">$161.00</td>
    </tr>
    <tr>
        <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
    </tr>
    <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
        <td>3</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$500.00</td>
        <td class="text-error"></td>
        <td class="text-success">$661.00</td>
    </tr>
    <tr>
        <td colspan="6"  class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
    </tr>
</tbody>

Здесь по нажатию по нечетной строке открывается четная. Реализовано при помощи css свойств data-toggle="collapse" и data-target, указывающее какой элемент скрыть/показать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.