从表中删除行后重置斑马纹样式

Question

我有一个表,使用bootstrap,用于:nth-child设置交替表行的样式.但是,每当我用jQuery删除一行时.hide(),交替的行都会中断.

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();

http://jsfiddle.net/saznq/1/

我想知道是否有一种简单的方法可以使用新配置重置表.我总是可以创建自己的类.even和.odd类,并在每次更新后过滤表以删除并重新应用类,但希望有一个更优雅的解决方案.

Answer 1

除此之外$('#r4').remove();,您可以使用以下内容:

$('#r4').after('<tr></tr>').hide();

jsFiddle例子

这会隐藏元素,并<tr>在其后面添加一个空元素,移动它的移除,从而不会干扰:nth-child样式.