(function($, undefined) { jQuery.fn.timeplanner = function(options) { options = $.extend({}, { can_change: true }, options); $(this).each(function(i, table) { if (options.can_change) $(this).addClass('timeplanner-can-change'); var checkbox_dump = $('<div/>') .css('display','none') .addClass('timeplanner-checkbox-dump'); $(this).after(checkbox_dump); $(this).find('td').each(function(i, table_cell) { var checkbox_here = $(this).find('input')[0]; $(checkbox_dump) .append(checkbox_here); var update_class = function(elm) { $(elm) .toggleClass('timeplanner-free', checkbox_here.checked); }; update_class(table_cell); if (options.can_change) { $(this).click(function() { $(checkbox_here) .click(); update_class(table_cell); }); } }); }); }; })(jQuery); jQuery(function($) { $('.timeplannerwidget').timeplanner(); });
<!doctype html> <html> <body> <div class="checkbox-dump"></div> <table class="timeplannerwidget"> <thead> <tr> <th>Seg</th> <th>Ter</th> <th>Qua</th> <th>Qui</th> <th>Sex</th> <th>Sab</th> <th>Dom</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="0-0" checked="checked" /></td> <td><input type="checkbox" name="1-0" /></td> <td><input type="checkbox" name="2-0" /></td> <td><input type="checkbox" name="3-0" checked="checked" /></td> <td><input type="checkbox" name="4-0" checked="checked" /></td> <td><input type="checkbox" name="5-0" checked="checked" /></td> <td><input type="checkbox" name="6-0" /></td> </tr> <tr> <td><input type="checkbox" name="0-1" checked="checked" /></td> <td><input type="checkbox" name="1-1" /></td> <td><input type="checkbox" name="2-1" checked="checked" /></td> <td><input type="checkbox" name="3-1" checked="checked" /></td> <td><input type="checkbox" name="4-1" /></td> <td><input type="checkbox" name="5-1" checked="checked" /></td> <td><input type="checkbox" name="6-1" /></td> </tr> </tbody> </table> <p></p> </body> </html>
body{ font-family:sans-serif; } th{ height:2em; } td{ text-align:center; /*center checkboxes fallback*/ background:#ddd; height:2em; width:2em; border: 1px solid gray; } .timeplanner-can-change td:hover{ background: #eee; } .timeplanner-free{ background: #fea; } .timeplanner-can-change .timeplanner-free:hover{ background: #FED; }