Bootstrap-Table改变行背景颜色或行文字样式方法及踩坑

// bootstrap-table表格加载成功后执行的函数
onLoadSuccess: function(){
    var tableId = $(selector);
    // 以下循环会报错
    for(var i = 1;i < tableId[1].rows.length;i++) {
        if(tableId[1].rows[i].cells[4].innerHTML.indexOf("正常") == -1 ){
            tableId[1].rows[i].setAttribute("style","color: #ccc;");
        }
    }
}

以上代码并不能成功，console.log(tableId[1].rows)，你会发现页面表格明明有不只有两行元素，而console出的只有两个<tr>的数组，第一个是表格标题的<tr>，第二个是<tr>的innerText是未查询到数据，为什么会这样呢？

我们看改进后的代码：

onLoadSuccess: function(){
    setTimeout(function(){
        var tableId = $(selector);
        for(var i = 1;i < tableId[1].rows.length;i++) {
            if(tableId[1].rows[i].cells[4].innerHTML.indexOf("正常") == -1 ){
                tableId[1].rows[i].setAttribute("style","color: #ccc;");
            }
        }
    },1)
}

加一个setTimeout就可以了，原因是onLoadSuccess执行时，并未能获得渲染后的表格数据，加一个延时就可以了，尽管是1ms，但是根据JavaScript 执行机制就可以知道，setTimeout回调函数是异步的，必须等主线程中的任务执行结束后才会处理异步任务，详情见掘金