0

我有一个看起来像这样的引导表 -

$('#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>

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

我正在执行一个 javascript 来更改单元格的颜色

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

但是，当我对表格进行排序（不刷新页面）时，它会以某种方式删除动态单元格类。任何想法如何在对表格进行排序时保留我的单元格类？

4

1 回答 1

0

排序事件由您在代码中使用的引导表扩展处理。它不是引导程序本身的一部分，它的排序系统通过按所选顺序重新创建表行来工作。这意味着您正在为将被删除的元素分配一个类。要解决问题，您可以：

  1. 使用不删除列行的不同排序系统

  2. changeBackground排序结束后再次执行函数

于 2020-10-30T12:02:11.593 回答