将 css 类添加到 tr 失败答案

【问题标题】：Add a css class to tr fails将 css 类添加到 tr 失败
【发布时间】：2015-10-01 08:39:04
【问题描述】：

我使用Bootstrap Table 远程加载我的数据data-url="data.json"。所以我的桌子：

<table id="mytable" class="table table-hover" data-url="data.json" data-toggle="table" id="table-pagination"  data-pagination="true">
    <thead>
         <tr>
              <th data-field="id" data-align="center">id</th>
              <th data-field="type" data-align="center">type</th>
              <th data-field="name" data-align="center">name</th>
              <th data-field="product" data-align="center">product</th>
              <th data-field="use" data-align="center">use</th>
              <th data-field="quantity" data-sortable="true">quantity</th> 
         </tr>
    </thead>
</table>

最后一列只有数字（没有任何其他字符）。 data.json 是这样的：

[
    {
        "id": 120,
        "type": "type1",
        "name": "name 1",
        "product": "250304-01",
        "use": "use 1",
        "quantity": 10000
    },
    {
        "id": 121,
        "type": "type2",
        "description": "name 2",
        "product": "250124-01",
        "cutter": "use 1",
        "quantity": 80
    }
]

我想检查，当最后一列中的值小于 100 时，将在该 tr 中添加一个类。我搜索了一下，发现可以使用filter 完成。所以，我编码：

 $('tbody tr').filter( function(){
                       return $('td:last', this).text() < 100;
                     }).addClass('warning');

我将上面的内容原封不动地保存到文件addWarning.js 中，并将其放在我页面底部的所有其他scripts 的末尾。

 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/bootstrap-table.js"></script>
 <script src="assets/js/bootstrap-table-el-GR.js"></script>
 <script src="assets/js/addWarning.js"></script>

但它不起作用..我错过了什么？

【问题讨论】：

您是否尝试过调试它以查看您的问题发生在哪里（即它是选择器，还是在过滤器功能中）？
@PranavCBalan 添加后如何进行检查？
addWarning.js 或 addWarnings.js ？或者这只是你的问题中的一个错字？
@TusharKhatiwada 我已编辑，感谢您的注意

标签： jquery twitter-bootstrap-3 addclass bootstrap-table

【解决方案1】：

仅在加载远程内容后过滤表格行，否则$('tbody tr')不会选择任何元素。因此，您可以为 load-success.bs.table 事件绑定事件处理程序，它会在远程数据加载成功时触发。

$('table').on('load-success.bs.table', function() {
  $('tbody tr').filter(function() {
    return $('td:last', this).text() < 100;
  }).addClass('warning');
});

【讨论】：

我能问你别的吗？在该表中有一个功能，我可以按数量对记录进行排序。见这里issues.wenzhixin.net.cn/bootstrap-table。当我排序类警告被删除..我必须添加什么来持续检查值？
@yaylitzis : 然后使用 reset-view.bs.table 事件
太好了，太好了！再次感谢！

【解决方案2】：

我将上面的内容原样保存到文件 addWarning.js 中，并将其放在我的页面底部在所有其他脚本的末尾。

这意味着脚本在被击中时运行 - 这是在页面加载过程中。此时引导表还没有加载数据，所以过滤器不匹配。

根据文档页面：http://bootstrap-table.wenzhixin.net.cn/documentation/，您需要收听load-success.bs.table，您应该能够直接将现有代码替换为：

$(function() {
    $(body).on("load-success.bs.table", function() {
        $('tbody tr').filter( function(){
                   return $('td:last', this).text() < 100;
                 }).addClass('warning');
    }); 
});

【讨论】：

【解决方案3】：

为什么不使用rowStyle 选项data-row-style="rowStyle"，然后：

function rowStyle(row) {
    if (row.quantity < 100) {
        return {
            classes: 'warning'
        };
    }
    return {};
}

文档：http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options

演示：http://jsfiddle.net/wenyi/e3nk137y/3270/

【讨论】：

【解决方案4】：

var tr = $('#mytable tbody tr')

tr.each(function () {
    var td = $(this).find('td:last');
    alert(td.text());
    if (td.text() < 100) {
        td.addClass('warning')
    }


})

试试这个方法

DEMO

【讨论】：