Table experimentation - editable

Experimenting with tables a bit, to add rows and columns and edit table cells on click. Not completed.

HTML

<table id="table1"></table>
<table id="table2"></table>
<div id="notable"></div>

CSS

table { width:100%;margin-bottom:10px; }
th { background:#ddd; }
tr { height:25px; }
td, th { border:1px solid #aaa;padding:2px;height:15px; }
tr.odd { background:#eee; }
tr.even { background:#e4e4e4; }

JavaScript

;(function($) {
    $.fn.tableEditor = function() {
        addRowButton = '<button class="addrow">add row</button>';
        addColButton = '<button class="addcol">add col</button>';
        infoSpan = '<span class="info"></span>';
        tableBase = '<thead><tr><th></th></tr></thead><tbody></tbody>';
        firstRow = '<tr class="odd"><td></td></tr>';
        updateInfo = function(elem) {
            elem.find('.info').text(elem.data('rows')+' rows, '+elem.data('cols')+' cols');
            elem.find('thead th, tfoot th').attr('colspan', table.data('cols'));
        };
        addControls = function(elem) {
            elem.html(tableBase).find('thead th').prepend(addRowButton, addColButton, infoSpan);
        };
        return this.each(function() {
            var self = $(this);
            if (self[0].tagName === 'table' || self[0].tagName === 'TABLE') {
                addControls(self);
                self.data({rows: 0, cols: 0}).find('thead button').bind('click', function(e) {
                    var self = $(this),
                        table = self.closest('table');
                    if (self.hasClass('addrow')) {
                        table.data('rows', table.data('rows') + 1);
                        if (table.data('cols') === 0) {
                            table.data('cols', table.data('cols') + 1).find('tbody').append(firstRow);
                        } else {
                            var newTr = $('<tr class="'+(table.data('rows') % 2 === 0 ? 'even' : 'odd')+'"></tr>');
                            for (var i=0; i < table.data('cols'); i++) {
                                newTr.append('<td></td>');
                            }
                            table.find('tbody').append(newTr);
                        }
                    } else {
                        table.data('cols', table.data('cols') + 1);
                        if (table.data('rows') === 0) {
                            table.data('rows', table.data('rows')...