public static function styleTable($selector) { if (self::$styleTableInvocations == 0) { self::$styleTableInvocations++; $js = <<<JS (function (\$) { \$.fn.styleTable = function (options) { var defaults = { css: 'styleTable' }; options = \$.extend(defaults, options); return this.each(function () { input = \$(this); input.addClass(options.css); input.find("tr").on('mouseover mouseout', function (event) { if (event.type == 'mouseover') { \$(this).children("td").addClass("ui-state-hover"); } else { \$(this).children("td").removeClass("ui-state-hover"); } }); input.find("th").addClass("ui-state-default"); input.find("td").addClass("ui-widget-content"); input.find("tr").each(function () { \$(this).children("td:not(:first)").addClass("first"); \$(this).children("th:not(:first)").addClass("first"); }); }); }; })(jQuery); JS; $css = <<<CSS .styleTable { border-collapse: separate; } .styleTable TD { font-weight: normal !important; padding: .3em; border-top-width: 0px !important; } .styleTable TH { text-align: center; padding: .5em .3em; } .styleTable TD.first, .styleTable TH.first { border-left-width: 0px !important; } CSS; $html = JS::library(JS::JQUERY_UI_CSS) . JS::css($css) . JS::libraryWithDependancies(JS::JQUERY) . JS::javaScript($js); } else { $html = ''; } $js = <<<JS \$().ready(function () { \$('{$selector}').styleTable(); }); JS; return $html . JS::javaScript($js); }