javascript - Bootstrap showing and collapsing table rows -
so writing program uses php collect data database , data creating html strings shown below.
i echoing data in html file , using bootstrap create table, , table comes out perfectly, looking able have user using website able click on row , more detailed data row clicked on comes down. code wrote try , accomplish looks so:
$htmlstr .= '<tr data-toggle="mycollapse" data-target="#details" class="accordion-toggle">'; $htmlstr .= '<td>' data '</td>'; $htmlstr .= '<td class="text-center">' . number_format(more data) . '</td>'; $htmlstr .= '<td class="text-right">' . round(percentage of data) . '%</td>'; $htmlstr .= '</tr>'; $more = functionfordetails(details looking for); $htmlstr .= $more;
where functionfordetails() returns:
$htmlstr .= '<tr id="details" class="mycollapse">'; $htmlstr .= '<td class="text-center"><div>' . detailed data . '</div></td>'; $htmlstr .= '<td class="text-center"><div>' . more . '</div></td>'; $htmlstr .= '<td class="text-center"><div>' . more . '%</div></td>'; $htmlstr .= '</tr>';
my table comes out fine rows, when click row, nothing happens. want more detailed data row clicked drop down more rows, , go away when click again. wrote css , jquery go along still not work. , yes linking bootstrap libraries , jquery library html. ideas or helpful tips wonderful, thank you!
css code:
table .mycollapse { display: none; } table .mycollapse.in { display: table-row; !important }
jquery code:
$(".mycollapse").click(function() { if($('#versions').hasclass('in')){ $('#versions').removeclass('in'); } else{ $('#versions').addclass('in'); } });
the "in" class doesn't work !important being after semicolon. try doing , think you'll notice changes @ least:
table .mycollapse.in { display: table-row !important; }
Comments
Post a Comment