Jquery Create Table + Editor

by blowsie

HTML

<script src="http://dl.dropbox.com/u/14037764/Development/cdn/jquery.edocuments.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
    <table id="insert-table">
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
        </tr>
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
        </tr>
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
        </tr>
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
        </tr>
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
        </tr>
        <tr>
            <td>&#65279;</td>
            <td>&#65279;</td>
            <td>&#65279;</td>
           ...

CSS

body{ font-family: Arial; font-size:11px;}
td, th {border:1px solid #000; padding: 5px; height:25px; width:25px;}
/*td:before{content: '\00a0'}*/
tr {height:25px;}
.selected {background:yellow;}
th {background:blue; color:#fff;}
.table-wrap {width:auto;padding: 0 10px 10px 0; }
table {width:100%; height:100%;empty-cells:show;}

#insert-table {
    margin:10px;
    width:auto;
    /*border-spacing: 0px;*/
    border-collapse:separate;
}

#insert-table td {
    height:5px;
    min-width:5px;
    max-width:5px;
    line-height:5px;
    padding:5px 5px;
    border: 1px inset #333
}
/*#insert-table table td:after {border:1px solid yellow}*/
#insert-table td.hover{
    border-color:#db5315;
    background:#fffeda;
}
#insert-table td.chosen {
    border-color:blue;
    background:lightblue;
}
#insert-table td.chosen.hover {
    border-color:#db5315;
    background:#fffeda;
}

#insert-table tr {
    min-height:10px;
    height:10px;
    max-height:10px;
}


/*=============CONTEXT MENU=================*/
.contextMenu {
    position: absolute;
    width: 150px;
    z-index: 99999;
    border: solid 1px #CCC;
    background: #EEE;
    padding: 0px;
    margin: 0px;
    display: none;
}
.contextMenu LI {
    list-style: none;
    padding: 0px;
    margin: 0px 0px;
    position:relative;
}
.contextMenu A {
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 20px;
    height: 20px;
    background-position: 6px center;
    background-repeat: no-repeat;
    outline: none;
    padding: 1px 5px;
    padding-left: 28px;
}
.contextMenu LI.hover A {
    color: #FFF;
    background-color: #16AAFF;
}
.contextMenu LI.disabled A {
    color: #AAA;
    cursor: default;
}
.contextMenu LI.hover.disabled A {
    background-color: transparent;
}
.contextMenu LI.hover.context-expand A  {
    background-color: #ddd;
    color: #333;
}
.contextMenu LI.separator {
    border-top: solid 1px #CCC;
}
.contextMenu LI ul {
    position:absolute; 
    left:150px;
   ...

JavaScript

$("#insert-table td").hover(function() {
    var el = $(this);
    row = el.parent();
    table = el.parents('table');
    x = el.index();
    y = row.index();
    table.find('tr:lt(' + [y + 1] + ')').find('td:lt(' + [x + 1] + ')').toggleClass('hover');
    $("#insert-table-count").text([x + 1] + " x " + [y + 1]);
}).click(function() {
    var mytable = '';
    mytable += '<table>';
    var ri = 0;
    for (ri = 0; ri <= y; ri++) {
        mytable += '<tr>';
        var ci = 0;
        for (ci = 0; ci <= x; ci++) {
            mytable += '<td>&#65279;</td>';
        }
        mytable += '</tr>';
    }
    mytable += '</table>';
    $("#insert-table-output").html(mytable);
});

$("#insert-table-build").click(function() {
    var rows = table.data("count").y;
    cols = table.data("count").x;
    mytable = '';
    mytable += '<table id="insert-table-output">';
    var ri = 0;
    for (ri = 0; ri <= rows; ri++) {
        mytable += '<tr>';
        var ci = 0;
        for (ci = 0; ci <= cols; ci++) {
            mytable += '<td>&#65279;</td>';
        }
        mytable += '</tr>';
    }
    mytable += '</table>';
    $("#insert-table-output").html(mytable);

});


//Disable Table Functions
document.execCommand("enableInlineTableEditing", null, false);
//Disable Object Resize
document.execCommand("enableObjectResizing", false, "false");

//$( ".table-wrap" ).resizable({ 
//    minHeight: $("table").height(), 
//    minWidth: $("table").width(),
//    start: function(event, ui) {
//         var that = $(this)
//        table = that.find('table');
//        lastrow = table.find('tr:last');
//        totalrows = lastrow.index();
//        totalcols = lastrow.find('td:last').index();
//        
//   $( ".table-wrap" ).resizable( "option", "minWidth", totalcols * 23 );
//    }
//});
$('.context-expand').hover(function() {
    $(this).doTimeout('hover', 250, function(elem) {
        $(elem).addClass('bold');
        $(elem).find('ul').stop(true, true).slideDown(250);
    },...