I have a table that, with bootstrap, uses :nth-child to style alternating table rows. However, whenever I remove a row with jQuery .hide() the alternating rows break.
HTML:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<table id='t1' class="table table-bordered table-striped table-condensed table-hover table-even-widths">
<thead>
<tr>
<th>Heading A</th>
<th>Heading B</th>
<th>Heading C</th>
</tr>
</thead>
<tbody>
<tr id='r1'>
<td>0</td>
<td>b</td>
<td>c</td>
</tr>
<tr id='r2'>
<td>1</td>
<td>b</td>
<td>c</td>
</tr>
<tr id='r3'>
<td>2</td>
<td>b</td>
<td>c</td>
</tr>
<tr id='r4'>
<td>3</td>
<td>b</td>
<td>c</td>
</tr>
<tr id='r5'>
<td>4</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
JS:
$('#r4').hide();
I was wondering if there was an easy way to sort of reset the table with the new configuration. I can always make my own .even and .odd class and filter through the table after every update to remove and reapply the classes, but was hoping for a more elegant solution.
Aside from $('#r4').remove();, you could use something like this:
$('#r4').after('<tr></tr>').hide();
This hides the element, and adds an empty <tr> element after it, displacing its removal and thereby doesn't disturb the :nth-child styling.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments