替代行颜色，除了“无替代颜色”类答案

【问题标题】：Alternate row color except 'no-alternate-color' class替代行颜色，除了“无替代颜色”类
【发布时间】：2018-09-11 04:21:27
【问题描述】：

我在 JavaScript 文件中有这个表达式...

$('tbody tr:even').addClass("alt-row");

它会交替显示我所有表格行的颜色，这没关系。但我想在 tr 中添加一个异常类，例如“no-alternate-color”。

<table id="invoice">
  <tbody>
  <tr class="headings">
    <th class="item first" style="padding-left:5px;">Unidad</th>
    <th class="description">Descripcion</th>
    <th class="price">Precio</th>
    <th class="quantity">Cantidad</th>
    <th class="linetotal last" style="padding-right:7px;">Total</th>
  </tr>
  <tr class="lineitem alt-row" style="border-bottom:1px solid #e5e5e5;">
    <td class="item_name_data" style="padding:2px 2px 2px 5px;">MacBook Pro 13"</td>
    <td class="description">13-inch: 2.4 GHz
2.4GHz dual-core
Intel Core i5
    </td>
    <td class="price_data">1199.99</td>
    <td class="quantity_data">2</td>
    <td class="linetotal_data" style="padding-right:5px;">2399.98</td>
  </tr>
  <tr class="lineitem" style="border-bottom:1px solid #e5e5e5;">
    <td class="item_name_data" style="padding:2px 2px 2px 5px;">Muji Table</td>
    <td class="description">awesome light brown table</td>
    <td class="price_data">89.99</td>
    <td class="quantity_data">1</td>
    <td class="linetotal_data" style="padding-right:5px;">89.99</td>
  </tr>
</tbody>
</table>

例如，上表中tr的本来就没有“alt-row”类，而是通过jQuery函数添加的。

我对 jQuery 不是很流利。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery html-table

【解决方案1】：

如果您愿意（取决于您要完成的工作），您可以单独使用 CSS 来完成此操作.. 达到此效果..

http://jsfiddle.net/xENWM/1/

【讨论】：

@milkywayjoe 如果您没有注意到，这两种方法的结果略有不同。 jquery 方式将no-alt 行完全排除在奇数和偶数的计算之外，css 只是跳过了该类的偶数。拨弄一下jsfiddle.net/xENWM/3 nto 看看它是否对你很重要。
我看到有一个小的差异，但总的来说，对于我可能使用这样的东西，我更喜欢 css.. 两种解决方案都很好

【解决方案2】：

$('tbody tr:not(.no-alternate-color):even').addClass("alt-row");

http://jsfiddle.net/CKeew/

【讨论】：

这个就可以了，超级简单
我无法在快速搜索中找到参考，但我记得 IE 中的 :not 选择器遇到了严重的性能问题；如果这对您来说是个问题，您可以尝试使用 .not 函数： $('tbody tr').not('.no-alternate-color').filter(':even').addClass('alt-row' )