css - 将类添加到 jQuery 日期选择器

Question

我有一个带有 css 的网页，它改变了默认的 TABLE 布局。

TABLE:not(.base) {
    border-spacing: 0;
    border-style: none;
    border-collapse: collapse;
}

TABLE:not(.base) > * > TR > * {
    border: 0.2rem solid #88F;
    padding: 0 0.375rem 0 0;
    vertical-align: top;
}

...

我想使用 JQuery 日期选择器，但它使用表格构建标记，结果变得很丑陋。我想将“.base”添加到所有这些表中，但找不到正确的方法。

这是我到目前为止尝试过的。

$(document).ready(function () {
    var formatCal = function (elt) {
        alert(elt);
        elt.find('TABLE').addClass('base');
    }

    $('#divCal').datepicker({
        beforeShow: formatCal
        , onSelect: function (val) {
            alert(val);
        }
    });

    formatCal($('#divCal'));
});

但每次我选择一个日期时，日期选择器都会重新绘制(没有 .base 类)。

怎么办？

Answer 1

我将使用 MutationObserver。

$(document).ready(function () {
    var formatCal = function (elt) {
        elt.find('TABLE').addClass('base');
    }

    $('#divCal').datepicker({
        beforeShow: formatCal
        , onSelect: function (val) {
            alert(val);
        }
    });

    formatCal($('#divCal'));

    var observer = new MutationObserver(function (records) {
        var record = records[0];

        formatCal($(record.target));
    });

    // Configuration of the observer:
    var config = {
        attributes: false,
        childList: true,
        characterData: false
    };

    // Pass in the target node, as well as the observer options
    observer.observe($('#divCal > *').get(0), config);
});