Bootstrap Table排序后丢失动态单元格类如何解决？

这个问题的核心原因是：Bootstrap Table在执行排序、分页这类操作时，会重新渲染表格的tbody内容，你之前动态添加的table-danger/table-success类会被新生成的DOM元素覆盖掉。要解决这个问题，我们需要在表格每次渲染完成后，重新应用样式逻辑。

具体解决方案步骤： #

1. 把颜色判断的核心逻辑封装成独立函数，方便重复调用；
2. 监听Bootstrap Table的post-body.bs.table事件——这个事件会在表格tbody渲染完成后触发（包括排序、分页操作后），每次触发时重新执行样式设置；
3. 确保输入值的类型正确（字符串转数字），避免比较逻辑出错。

修改后的完整代码： #

JavaScript部分

// 封装核心的颜色更新逻辑
function updateCellColors(proposalLimit) {
    if (!proposalLimit) return;
    const limit = parseInt(proposalLimit, 10);
    const table = document.getElementById("myTable");
    const tableLen = table.rows.length;
    for (let i = 1; i < tableLen; i++) {
        const cellValue = parseInt(table.rows[i].cells[1].innerText, 10);
        if (cellValue > limit) {
            table.rows[i].cells[1].className = 'table-danger';
        } else {
            table.rows[i].cells[1].className = 'table-success';
        }
    }
}

// 表单提交时触发颜色更新
$('#colorChangeForm').submit(function (e) {
    e.preventDefault();
    const noOfProposals = document.getElementById("countInput").value;
    updateCellColors(noOfProposals);
});

// 监听表格渲染完成事件，排序/分页后重新应用样式
$('#myTable').on('post-body.bs.table', function () {
    const currentLimit = document.getElementById("countInput").value;
    updateCellColors(currentLimit);
});

HTML部分（仅做小优化）

<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha256-o8aByMEvaNTcBsw94EfRLbBrJBI+c3mjna/j4LrfyJ8=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
</head>
<form class="form-inline" id="colorChangeForm">
    <div class="form-group mb-2">
        <label for="countInput">No. of Proposals - </label>
        <!-- 把input类型改成number，更符合数字输入场景 -->
        <input type="number" class="form-control" id="countInput" placeholder="limit of proposals">
    </div>
    <button type="submit" class="btn btn-primary mb-2" id="btnChangeColor">Submit</button>
</form>
<table data-toggle="table" data-classes="table table-hover" data-striped="true" data-sort-order="asc" style="width: auto;" id="myTable" class="table">
    <thead class="thead-dark">
        <tr style="background-color:lightgray">
            <th data-sortable="true">Name</th>
            <th data-sortable="true">Total Proposals</th>
        </tr>
    </thead>
    <tr>
        <td>A</td>
        <td>123</td>
    </tr>
    <tr>
        <td>B</td>
        <td>150</td>
    </tr>
    <tr>
        <td>C</td>
        <td>170</td>
    </tr>
</table>

关键细节说明： #

• post-body.bs.table事件：这是Bootstrap Table提供的内置事件，专门用于在tbody内容渲染完成后执行自定义逻辑，完美适配排序、分页等会重新渲染表格的场景；
• 类型转换：用parseInt()把输入值和单元格文本转成数字，避免字符串比较导致的逻辑错误（比如"99"会被错误认为大于"100"）；
• 封装函数：把样式逻辑抽成独立函数，避免代码重复，同时让逻辑更清晰易维护。

这样修改后，不管你怎么排序表格，只要输入框里有值，单元格的颜色都会自动重新设置，不会再丢失啦。

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