Clean Table

Test widget that cleans up tables

by markallgood

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/sunny/jquery-ui.css">
<table id="myTable">
<tr><td>Column A</td></tr>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Footer</td></tr>
</table>

CSS

tr.even {background-color:#c0c0c0;}
tr.odd {background-color:#fff;}

JavaScript

(function($) {
    $.widget("demo.cleanTable", {

        // These options will be used as defaults
        options: {
            includeFooter: false,
        },

        // Set up the widget
        _create: function() {
            this.element.addClass("ui-widget ui-widget-content ui-corner-all");
            // THEAD
            if (this.element.children("thead").length == 0) {
                this.element.find("> tr:first, > tbody > tr:first").wrap("<thead></thead>").parent().prependTo(this.element);
            }
            this.element.children("thead").children().addClass("ui-state-default");

            //TFOOT
            this._setOption("includeFooter", this.options.includeFooter);

            //TBODY
            if (this.element.children("tbody").length == 0) {
                this.element.children("tr").wrapAll("<tbody></tbody>");
            }
            this.refreshEvenOdd();
        },

        // Use the _setOption method to respond to changes to options
        _setOption: function(key, value) {
            switch (key) {
            case "includeFooter":
                if (value) {
                    if (this.element.children("tfoot").length == 0) {
                        this.element.find("> tr:last, > tbody > tr:last").removeClass("even odd").wrap("<tfoot></tfoot>").parent().appendTo(this.element);
                    }
                    this.element.children("tfoot").children().addClass("ui-state-active");
                } else {
                    var $footerRows = this.element.children("tfoot").children();
                    $footerRows.removeClass("ui-state-active").unwrap().appendTo(this.element.children("tbody"));
                    this.refreshEvenOdd();
                }
                // handle changes to clear option
                break;
            }

            // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
            $.Widget.prototype._setOption.apply(this,...