Bootstrap Table 排序删除分配给单元格的动态 class

Question

我有一个 bootstrap table 看起来像这样 -

$('#colorChangeForm').submit(function () {
 changeBackground();
 return false;
});

function changeBackground() {
    var noOfProposals = document.getElementById("countInput").value;
    var table = document.getElementById("myTable");
    var tableLen = table.rows.length;
    for (var i = 1; i < tableLen; i++) {
            if (noOfProposals) {
                if (table.rows[i].cells[1].innerText > noOfProposals) {
                    table.rows[i].cells[1].className = 'table-danger';
                }
                else {
                    table.rows[i].cells[1].className = 'table-success';
                }
            }
    }
}

<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 type="proposals" 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>

我正在根据值更改“提案总数”的 class。这个值，我是从同一页面上的一个表单中获取的。

我正在执行 javascript，我正在更改单元格的颜色

这会正确更改单元格的颜色。

但是，当我对 table 进行排序（不刷新页面）时，它以某种方式删除了动态单元格 class。知道如何在对 table 进行排序时保留我的单元格 class 吗？

Answer 1

排序事件由您在代码中使用的 bootstrap-table 扩展处理。它不是 bootstrap 本身的一部分，它的排序系统通过按选定顺序重新创建 table 行来工作。这意味着您正在将 class 分配给将被删除的元素。解决问题你可以：

使用不删除列行的不同排序系统
排序结束后再次执行changeBackground函数

Bootstrap Table 排序删除分配给单元格的动态 class

Bootstrap Table sorting removes dynamic class assigned to a cell

html

javascript

jquery

html-formhandler

bootstrap-4