Question

因此，我有一个图像元数据表，该图像元数据表是在加载页面时根据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]));
                        }
                    }


                }
            });
        }

谢谢

Answer 1

使用CSS类代替style属性。另外，请确保正确呈现HTML。

Answer 2

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

动态重载表时，列样式未呈现

2 个答案: