Я работаю на странице учетных записей, в которой перечислены транзакции (кредиты и дебетовые переводы). Я хотел бы, чтобы пользователь мог щелкнуть по строке таблицы, и он расширяет отображение дополнительной информации.
Я использую twitter bootstrap и просмотрел документацию, и это результат, который у меня есть
<table class="table table-striped" id="account-table">
<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" data-parent="#account-table" class="">
<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>
<div id="demo1" class="demo out collapse">Demo1</div>
</tr>
См: http://jsfiddle.net/2Dj7Y/
Единственная проблема заключается в том, что он отображает "раскрывающуюся информацию" в неправильном месте, я бы хотел добавить новую строку вместо печати в верхней части таблицы.
Я также попытался добавить в новую строку таблицы (которая просто отображает строку и не приводит к краху (применяется только к первой строке)
<tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
<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 id="demo1" class="demo out collapse">
<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>
См. http://jsfiddle.net/ypuEj/
Приветствия и спасибо за вашу помощь