Bootstrap 4条纹表格添加行后，如何重新渲染条纹样式？

这个问题我之前也踩过坑，本质是Bootstrap的table-striped样式的工作机制导致的——它依赖CSS的:nth-of-type(odd)伪类给奇数行上色，这个伪类是基于DOM结构中的行顺序计算的，不管行是否可见。结合你的代码，我给你拆解原因和解决办法：

核心原因分析 #

1. 如果你把模板行tr#row-template-new放在了#editor-table tbody里面（并且是隐藏状态），那它会被算进:nth-of-type的计数里，导致实际可见的业务行的奇偶顺序直接被打乱。
2. 就算模板行在tbody外，克隆时如果继承了模板行的display:none或者inline背景样式，也会导致新行显示后干扰原有条纹的规律。

解决方案 #

方案1：调整模板行位置（推荐）

把模板行从tbody里移出来，放在一个隐藏容器中，这样它就不会干扰tbody内的行计数：

<div class="table-responsive">
    <table class="table table-striped" id="editor-table">
        <tbody>
            <!-- 你的业务行内容 -->
        </tbody>
    </table>
</div>
<!-- 模板行单独放在隐藏容器里 -->
<div style="display: none;">
    <tr id="row-template-new">
        <!-- 模板内容 -->
    </tr>
</div>

然后修改你的JS代码，确保克隆后的行清除多余inline样式并正确显示：

// 克隆模板行
const $clonedRow = $('tr#row-template-new').clone();
// 设置新ID、清除inline样式、确保行可见
$clonedRow.attr('id', 'row-new')
          .removeAttr('style')
          .show();

// 检查克隆是否成功（jQuery对象永远不为false，用length判断）
if (!$clonedRow.length) {
    return false;
}

// 添加到tbody顶部并淡入
$('#editor-table tbody').prepend($clonedRow);
$('#row-new').fadeIn('slow');

方案2：修改CSS规则（仅适用于无法移动模板行的场景）

如果实在不能移动模板行，你可以重写Bootstrap的条纹样式，让它只针对可见的行计算奇偶：

.table-striped tbody tr:visible:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

这个方法会覆盖原生table-striped样式，忽略隐藏的模板行，只对可见业务行应用条纹效果。

额外提醒 #

• 不要用if (!$clonedRow)判断克隆是否成功，jQuery对象永远不会是false，应该用$clonedRow.length === 0来判断。
• 你已经记得移除模板行的重复ID，这步做得很对，避免了页面ID冲突问题。

内容的提问来源于stack exchange，提问作者TheRealPapa