Question

我正在调试一个Web应用程序中的一个问题，其中AJAX-fn返回修改后的table，该文本应该替换现有内容。该表在其class属性中列出了4个类，但其中只有3个存在。我试图为此案例构建一个副本，最终失去了所有课程！

请。看看我的例子。您可以在JS第一行中看到的predData表使用以下类：table table-sm table-bordered mt-4。但是，如果您检查注入的表-表中没有任何表！我在做什么错了？

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

因为您要将表追加到table＃preData。使用div代替表格来附加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>

Answer 2

您正在尝试向table伴侣插入table#preData！请使用replaceWith()而不是.html() :)

Answer 3

您应该只替换表内容（例如，tbody）而不是整个table标签：

function Filltable(){
$("#predData").html('<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>
<table id="predData" class="table table-sm table-bordered mt-4">

</table>

您还可以使用div来容纳表格以替换整个表格内容

<div id="tableHolder"></div>

$("#tableHolder").html('<table>...</table>');

为什么html（）会丢失类分配？

3 个答案: