Question

参考一个简单的HTML表格：

<table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc">

我可以将jSON数据调用从表更改为javascripts吗？

我正在尝试实现一些jquery条件格式化，我注意到即使我把我的脚本放在底部，远低于table元素，DOM最后加载JSON数据，其中我我怀疑这就是我的条件格式没有适用的原因（一般情况下批准这一点，如果需要具体细节，我会发布我的代码。）

由于评论请求，我添加了整个代码。

以下是完整代码： 的 HTML：

<table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc">
    <thead>
    <tr>
        <th data-sortable="true" data-field="name" >Name</th>
        <th data-sortable="true" data-field="W">Width</th>
        <th data-sortable="true" data-field="H">Height</th>
        <th data-sortable="true" data-field="D">Depth</th>
    </tr>
    </thead>
</table>

data1.json：

[{
  "name": "First Value",
  "W": 1,
  "H": 10,
  "D": 100
},{
"name": "First Value",
"W": 1,
"H": 10,
"D": 100
},{
"name": "First Value",
"W": 0,
"H": 10,
"D": 100
},...

的Javascript / JQuery的：

$(document).ready(function(){
        $('td:nth-child(2)').each(function() {
            var fValue = this.text();
            if (fValue == 0) {
                var oTableRow = $(this).parent();
                oTableRow.css('background-color', 'red');
            }
        });
});

Answer 1

您遇到的问题是您异步加载数据，更改脚本顺序以修复它只会进一步引入竞争条件。解决此问题的最佳方法是在数据加载时进行挂钩。您可以通过两种方式执行此操作，方法是通过ajax手动调用json，然后加载表，以便在加载时进行回调。我认为第二个选项是你最好的选择，就是使用bootstrap表发出的onLoadSuccess事件。

$('#table1').on('load-success.bs.table', function (e, arg1, arg2, ...) {
    // your jquery modifications go here
});

为什么表中的JSON数据url最后加载到DOM中？

1 个答案: