数据表不能与 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

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

见Jquery $( document ).ready() documentation

<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>

Answer 2

原因：当你的“数据表”脚本运行时，DOM 还没有准备好。

解决方案：既然你已经在使用 jQuery，请检查 ready 方法。