2014-10-22 149 views
0

我有一個css網頁,它改變了默認的TABLE佈局。將類添加到jQuery datepicker

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')); 
}); 

但是每次我選擇日期時,datepicker都會重繪(不帶.base類)。

怎麼辦?

+0

只是用css http://jsfiddle.net/victor_007/ggwGs/70/ – 2014-10-22 08:53:03

+0

我不想改變我的CSS的是如何設計添加一個類的父DIV和目標表,我想讓jQuery UI充分利用它。 – 2014-10-22 09:00:21

回答

0

我將使用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); 
});