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 datepicker，但是它使用表格构建标记，最后是丑陋的东西。我想添加＆＃34; .base＆＃34;对于所有这些表格，但我找不到合适的方法。

这是我到目前为止所尝试的内容。

$(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);
});

将类添加到jQuery datepicker

1 个答案: