在多个tbody中使用带有条纹的Bootstrap表格，其中包含重复的tr。

Question

我使用了简单的表格，采用了Bootstrap和table以及table-striped类。这样做效果很好。

<h3>Old table</h3>
<table class="table table-striped">
    <thead>
        <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tbody>
        <tr><td>Audi</td><td>A1</td></tr>
        <tr><td>Audi</td><td>A2</td></tr>
        <tr><td>Audi</td><td>A3</td></tr>
        <tr><td>Audi</td><td>A4</td></tr>
    </tbody>    
</table>

但是现在我需要复杂化我的表格，并在table元素中使用多个tbody（每个tbody有两个tr元素）。因此，Bootstrap类table-striped无法使用。 有没有办法在Bootstrap中实现这一点？ 车辆行应该是table-striped，但注释行不是。

<h3>Current table</h3>
<table class="table table-striped">
    <thead>
        <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tbody>
        <tr><td>Audi</td><td>A1</td></tr>
        <tr class="comment"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A2</td></tr>
        <tr class="comment hide"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A3</td></tr>
        <tr class="comment"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A4</td></tr>
        <tr class="comment hide"><td colspan="2">Comment...</td></tr>
    </tbody>    
</table>

Plunker example

- lukpaw

Answer 1

在Bootstrap中的解决方案比仅仅添加自定义类要复杂得多。对于table-striped，Bootstrap源代码只是将所有奇数行设置为不同的颜色。这意味着，如果您尝试让Bootstrap为您完成此操作而不是自己添加类，则可能会深入研究并给自己带来更多麻烦。

- JcKelley

Answer 2

$('tbody').parents('.fixed-table-container').find('tr:even').addClass( 'even' );

.even { background: #f9f9f9; }

在 bootstrap.min.css 中找到 --> .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}，将其替换为 --> .table-striped>tbody>tr:nth-of-type(odd){background-color:none}。这与编程有关。

- Fábio Zangirolami

---

fixed-table-container 对应的是表格前面的 div。 - Fábio Zangirolami