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