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

Question

我有一个表，通过引导程序，使用: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 example

隐藏元素，并在其后面添加一个空的<tr>元素，替换它的移除，从而不会打扰:nth-child样式。

Answer 2

here已经回答了Manuel这个问题。

这是Manuel的代码，使用JQuery：

$('tr').removeClass('alternate')​
$('tr:not(.hide):odd').addClass('alternate')​

这是原始jsFiddle。

Answer 3

查看this article by Christian Heilmann (December 2013)

其中发布的一些解决方案有：

1）重复渐变背景（仅限CSS）

<强> FIDDLE

2）nth-of-type，nth-child和代字号选择器的混合。 （仅限CSS）

<强> FIDDLE

3）存储在缓存对象中

<强> FIDDLE

Answer 4

修改

阅读完评论后，我添加了一个如何提取所需行的示例。

---

$.hide只能在视觉上隐藏元素。您必须从DOM中删除该元素，或者从表中提取它，以获得预期的结果。

要删除元素，您可以使用$.remove

$('#r4').remove()

要提取元素，您可以使用jQuery.appendTo

要在不从DOM中删除行的情况下提取行，必须将其附加到表tbody之外的元素。这可以通过不同的方式完成，但为了避免额外的标记，您只需将元素隐藏后添加到表thead。

$('#r4').hide().appendTo('table thead');