jQuery Grid Widget

by Mark

HTML

<div id="wrapper">
    <button id="addRowBtn" name="addRowBtn" value="Add Row">Add Row</button>
    <button id="addColBtn" name="addColBtn" value="Add Col">Add Column</button>
    <div id="table">
        <table id="myTable" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #E5E5E5"></table>
    </div>
</div>

CSS

body {
    font:normal 14px/16px Arial, Helvetica, sans-serif
}
#wrapper {
    margin:100px auto 0;
    width:80%;
}
#myTable {
    width:100%;
    margin:20px auto 0
}
#myTable th, #myTable td {
    padding:5px;
}
#myTable tr td.first {
    background:#F1F1F1;
    border:1px solid #E5E5E5;
}

JavaScript

var JS = JS || {};

JS.training = JS.training || {};
JS.training.tableData = JS.training.tableData || {};

JS.training.tableData = {
    defaults: {
        $table: $('#myTable'),
        addTableRowBtn: $('#addRowBtn'),
        addTableColBtn: $('#addColBtn')
    },
    createTable: function () {
        var _this = this,
            table = "";

        table += "<thead>";

        for (i = 0; i < 5; i++) {
            var tableHeader = (i == 0) ? "<th style='border:1px solid #E5E5E5; background:#F1F1F1'></th>" : "<th style='border:1px solid #E5E5E5; background:#F1F1F1'>A" + i + "</th>";
            table += tableHeader;
        }

        table += "</thead>";
        table += "<tbody>";

        for (i = 0; i < 5; i++) {
            table += "<tr  id='row" + i + "'>";
            for (var j = 0; j < 5; j++) {
                var tableDataCells = (j == 0) ? "<td width='3%' style='border:1px solid #E5E5E5;'>" + (i + 1) + "</td>" : "<td width=100px style='border:1px solid #E5E5E5' id='td" + j + "'  contenteditable=true> </td>";
                table += tableDataCells;
            }
            table += '</tr>';
        }

        table += "</tbody>";

        //APPEND TABLE MARKUP
        $(_this.defaults.$table).append(table);

        //BIND EVENTS
        _this.bindEvents();
    },

    addTableRow: function () {
        var _this = this,
            colLen = $("#myTable tr:nth-child(1) td").length,
            colVal = parseInt($("#myTable tr:last-child td:first").text()) + 1;

        for (i = 0; i < 1; i++) {
            var table = "<tr id=row" + colVal + "'>";
            for (var j = 0; j < colLen; j++) {
                if (j == 0) {
                    table += '<td width="3%" style="border:1px solid #E5E5E5; background:#F1F1F1">' + colVal + ' </td>';
                } else {
                    table += "<td width=100px style='border:1px solid #E5E5E5;' contenteditable=true id='td" + j + "'> </td>";
                }
            }
            table +=...