jquery - 为什么 html() 会丢失类分配？

Question

我正在调试网络应用程序中的一个问题，其中 AJAX-fn 返回一个修改后的表，该表应该替换现有内容。该表的 class 属性中列出了 4 个类，但其中只有 3 个保留下来。我试图为这个案例构建一个重现，但最终失去了所有类(class)!

请。看看我的例子。正如您在 JS 第一行中看到的那样，predData-table 使用以下类:table table-sm table-bordered mt-4。然而，如果你检查注入(inject)的表 - 它没有它们!我做错了什么吗？

function Filltable(){
$("#predData").html('<table class="table table-sm table-bordered mt-4" id="predData"><thead><tr><th style="width:3em;"></th><th>ShoeSize</th><th class="pg1 text-nowrap">Point Estimate (Height)</th><th class="pg2">Lower Conf</th><th class="pg2">Upper Conf</th><th class="pg3">Lower Pred</th><th class="pg3">Upper Pred</th></tr></thead><tbody id="tbp" data-v="1"><tr><td class="text-right"><span><span id="rpr_1_1">1</span></span></td><td><input type="number" name="rpr_1_2" id="rpr_1_2" class="w-100 form-control" value="[Null]"/></td><td class="pg1"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_3" id="rpr_1_3"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_4" id="rpr_1_4"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_5" id="rpr_1_5"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_6" id="rpr_1_6"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_7" id="rpr_1_7"/></td></tr></tbody><tfoot><tr><td colspan="7"><span id="id339056085"><span class="text-success fas fa-plus-circle"></span></span></td></tr></tfoot></table>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button onclick="Filltable()">
Fill Table
</button>
<table id="predData">

</table>

Answer 1

因为您想将表附加到表#preData。使用 div 而不是 table 来附加 html。

function Filltable(){
$("#predData").html('<table class="table table-sm table-bordered mt-4" id="predData"><thead><tr><th style="width:3em;"></th><th>ShoeSize</th><th class="pg1 text-nowrap">Point Estimate (Height)</th><th class="pg2">Lower Conf</th><th class="pg2">Upper Conf</th><th class="pg3">Lower Pred</th><th class="pg3">Upper Pred</th></tr></thead><tbody id="tbp" data-v="1"><tr><td class="text-right"><span><span id="rpr_1_1">1</span></span></td><td><input type="number" name="rpr_1_2" id="rpr_1_2" class="w-100 form-control" value="[Null]"/></td><td class="pg1"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_3" id="rpr_1_3"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_4" id="rpr_1_4"/></td><td class="pg2"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_5" id="rpr_1_5"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_6" id="rpr_1_6"/></td><td class="pg3"><input type="text" class="text-right form-control w-100" disabled="disabled" name="rpr_1_7" id="rpr_1_7"/></td></tr></tbody><tfoot><tr><td colspan="7"><span id="id339056085"><span class="text-success fas fa-plus-circle"></span></span></td></tr></tfoot>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button onclick="Filltable()">
Fill Table
</button>
<div id="predData">

</div>