数据表无法与javascript settimeout功能一起使用？

Question

我想在这里输出表格-

它实际上给出输出。 诸如响应式，排序，搜索之类的数据表功能不起作用。 但是，当我删除3000毫秒的延迟时，它可以完美运行。

setTimeout(function() {
  document.getElementById('tbl_display').innerHTML = '<table id="data-table" class="table table-striped table-bordered nowrap"><thead><tr><th>Product Name</th><th>ASIN</th><th>Image</th><th>Reimburse</th><th>Total Units</th><th>Total Sales</th><th>Profit</th></tr></thead><tbody><tr class="odd"><td><span class="text-primary">SW20 16GB memory</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$30.00</td><td>$13.00</td></tr><tr class="even"><td><span class="text-primary">Scinex Bluetooth headset</span></td><td>B0000089451</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$7.00</td><td>$3.00</td></tr><tr class="odd"><td><span class="text-primary">SW30</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>Refund</td><td>--</td><td>$39.00</td><td>$0.00</td></tr></tbody></table>';
}, 3000);

<div class="sales-info-table" id="tbl_display">

</div>

Answer 1

原因：当您的“数据表”脚本运行时，DOM将无法就绪。

解决方案：由于您已经在使用jQuery，因此需要使用checkout ready方法。

Answer 2

在文档“准备就绪”之前，无法安全地操作页面。 jQuery为您检测到这种就绪状态。 包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。 一旦整个页面（图像或iframe）（不仅是DOM）准备就绪，$（window）.on（“ load”，function（）{...}）中包含的代码将运行。

请参阅Jquery $（document）.ready（）文档

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(
        function(){
            document.getElementById('tbl_display').innerHTML='<table id="data-table" class="table table-striped table-bordered nowrap"><thead><tr><th>Product Name</th><th>ASIN</th><th>Image</th><th>Reimburse</th><th>Total Units</th><th>Total Sales</th><th>Profit</th></tr></thead><tbody><tr class="odd"><td><span class="text-primary">SW20 16GB memory</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$30.00</td><td>$13.00</td></tr><tr class="even"><td><span class="text-primary">Scinex Bluetooth headset</span></td><td>B0000089451</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$7.00</td><td>$3.00</td></tr><tr class="odd"><td><span class="text-primary">SW30</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>Refund</td><td>--</td><td>$39.00</td><td>$0.00</td></tr></tbody></table>';
        });      
</script>