动态重新加载表时，列样式未呈现答案

【问题标题】：When a table is dynamically reloaded, the column styling is not rendering动态重新加载表时，列样式未呈现
【发布时间】：2019-06-30 15:50:41
【问题描述】：

所以我有一个图像元数据表，它是在加载页面时通过 API 调用动态构建的，在上传新图像后，再次调用构建表的函数以包含新的图像数据。但是，列宽的 CSS 样式不会在页面上呈现（即使它在 Inspect Element 中看起来非常好！）。列的其他样式（例如 text-align）在重建表后起作用。刷新页面显示正确的样式。下面附上我的函数。

function getMedia(blockName) {
            $(".illustrationsContent").empty();
            $("#filterTestKey").empty();

            $.ajax({
                url: [url] + blockName.trim(),
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (media) {
                    var testKeys = [];

                    if (media.length > 0) {
                        $(".illustrationsNoContent").hide();
                    } else {
                        $(".illustrationsNoContent").show();
                    }

                    for (var i = 0; i < media.length; i++) {
                        var newRow = "<tr class='illustrationsContent'><td style='width: 20%;'>" + media[i].Question + "</td>"
                            + "<td>" + media[i].Name + "</td>"
                            + "<td style='text-align: center; width: 15%'>" + "<button type='button' class='delete' disabled>Delete</button>" + "</td></tr>";
                        testKeys.push(media[i].Question);
                        $("#illustrationsTable tbody").append(newRow);
                    }                    

                    testKeys = jQuery.uniqueSort(testKeys);

                    if (testKeys[0] == blockName) {
                        $("#filterTestKey").hide();
                        $("#TestKeyLabel").show();
                    } else {
                        $("#TestKeyLabel").hide();
                        $("#filterTestKey").append(new Option("All Test Keys", "All Test Keys"));
                        for (var i = 0; i < testKeys.length; i++) {
                            $("#filterTestKey").append(new Option(testKeys[i], testKeys[i]));
                        }
                    }


                }
            });
        }

谢谢

【问题讨论】：

CSS 将自动应用于任何新内容。如果它对您不起作用，那么您附加的 HTML 结构很可能是无效的。使用 DOM 检查器检查此代码的输出以验证这一点
另外，删除async: false。这是非常糟糕的做法。

标签： jquery html css ajax html-table

【解决方案1】：

使用 CSS 类而不是 style 属性。另外，请确保正确呈现 HTML。

【讨论】：

样式通常放在 CSS 类中，我只是为了这个问题而删除了它们。
另一方面，请记住，如何应用 CSS 样式是一个优先事项。对于这种特定情况，阅读此内容可能很有用：stackoverflow.com/a/14857179/7630248

【解决方案2】：

所以我仔细查看了 DOM 更改，并注意到 $(".illustrationsContent").empty(); 没有删除旧行。将其更改为 $(".illustrationsContent").remove(); 解决了样式问题（尽管我不得不承认我不完全确定如何）。

【讨论】：