Question

我正在动态地向表中添加<tr>和<td>标记。 <table>本身是静态的，还有它的属性。我遇到的问题是table table-bordered table-striped table-hover类没有正确应用于表行。但是，如果我只是从DOM检查器中剪切类并逐字粘贴它们，则样式生效。

我已将问题缩小到升级到JQuery 3.x.x（特别是3.1.1是我正在使用的）。我的代码库已在JQuery 2.2.4上运行，我在尝试升级后才看到这些问题。

以下表格没有对DOM检查器进行任何更改：

以下是仅删除CSS类并将其直接粘贴到以下内容后的表：

相关HTML：

<table class="table table-bordered table-striped table-hover" style="" id="multipleResultsTable">
 <tr>
    <th style="" class="checkBoxForMerge">
        Select
        <input data-val="true" data-val-required="The SimilarAccounts field is required." id="SimilarAccounts" name="SimilarAccounts" type="hidden" value="True">
    </th>
    <th>Account Name</th>
        <th>Owner</th>
</tr>
    <tr class="searchable">
        <td style="" class="checkBoxForMerge" data-guid="">
            <input class="insured-selector" data-val="true" data-val-required="The Selected field is required." id="generic_Selected" name="generic.Selected" type="checkbox" value="true"><input name="generic.Selected" type="hidden" value="false">
        </td>
        <td data-guid="">
            <a class="multipleResults" data-action-url="" data-guid="">Result 1</a>
        </td>
            <td>
                <ol>
                        <li>
                            <strong>Harley Quinn</strong></li>
                </ol>
            </td>
    </tr>
    <tr class="searchable">
        <td style="" class="checkBoxForMerge" data-guid="">
            <input class="insured-selector" id="generic_Selected" name="generic.Selected" type="checkbox" value="true"><input name="generic.Selected" type="hidden" value="false">
        </td>
        <td data-guid="">
            <a class="multipleResults" data-action-url="" data-guid="">Result 2</a>
        </td>
            <td>
                <ol>
                        <li>
                            <strong>Floyd Lawton</strong></li>
                </ol>
            </td>
    </tr>
</table>

相关的JQuery：

我尝试手动删除类并通过JQuery添加它们（请参阅下面的注释代码），但它也没有成功。

var multipleResultsTable = $("#multipleResultsTable");
var mergeTool = $("#mergeTool");
var searchString = $("#searchString");

$.ajax({
    type: "POST",
    url: action,
    data: { searchString: searchString },

    success: function (data) {
        if (data.Url !== undefined)
            window.location.href = data.Url;
        else {
            multipleResultsTable.html(data);
            multipleResultsTable.show();
            if ($('#SimilarAccounts').val() === "True") {
                mergeTool.show();
                $('.checkBoxForMerge').show();
            }
            //multipleResultsTable.removeClass('table table-bordered table-striped table-hover');
            //multipleResultsTable.addClass('table table-bordered table-striped table-hover');
        }
    },
    error: function () {
        bootbox.alert("Error showing search results");
    }
});

Answer 1

也遇到了同样的问题......只有解决问题的临时解决方案是在成功回调中更新整个表。

Answer 2

我最终有点做了Frozenex的建议。对于我原来的问题，我正在用<table>替换<tr>内的所有内容，并将其作为MVC局部视图传回。{/ p>

对于修复，我只是向部分添加了<table>元素，而不是只包含<tr>个。然后，我没有替换<table>的内容，而是在整个表格（部分外部）周围放置了一个包装<div>，而是将其内容替换为固定的部分。

很容易解决。

CSS类没有应用于JQuery 3.0的AJAX内容

2 个答案: