Jquery 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 contentEditable="true">
    <div class="table-wrap">
    <table>
        <tr>
            <td>1a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            
        </tr>
        <tr>
            <td>2a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            
        </tr>
        <tr>
            <td>3a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            
        </tr>
        <tr>
            <td>4a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            
        </tr>
        <tr>
            <td>5a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
            
        </tr>
    </table>
</div>
</div>


<ul id="myToolMenu" class="contextMenu">
    <li class="index"><a href="#index">Index</a></li>
    <li class="context-expand"><a>Row<span>►</span></a>
        <ul>
            <li class="row-delete"><a href="#row-delete">Delete Row</a></li>
            <li class="row-before separator"><a href="#row-before">Insert Row Before</a></li>
            <li class="row-after"><a href="#row-after">Insert Row After</a></li>
            <li class="row-up separator"><a href="#row-up">Move Row Up</a></li>
            <li class="row-down"><a href="#row-down">Move Row Down</a></li>
            <li class="row-heading separator"><a href="#row-heading">Apply Heading Style</a></li>
        </ul>
    </li>  
    <li class="context-expand"><a>Column<span>►</span></a>
        <ul>
            <li class="col-delete separator"><a href="#col-delete">Delete Col</a></li>
            <li class="col-before"><a...

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;}
/*=============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;
    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;
    top:0;
    width: 150px;
    z-index: 99999;
    border: solid 1px #CCC;
    background: #EEE;
    padding: 0px;
    margin: 0px;
    display:none;
}
.contextMenu LI.context-expand span {position:absolute; right:10px; color:#666;}
.bold > a {font-weight:bold; background:#ddd}
.contextMenu LI.bold ul li a{
    font-weight:normal}

JavaScript

//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() {
    $.doTimeout( 'hover', 250, function(elem){
        $(elem).addClass('bold')
        $(elem).find('ul').stop(true, true).slideDown(250)
    }, this);    
}, function() {
    $(this).removeClass('bold')
    $(this).find('ul').stop(true, true).slideUp(250)
    $.doTimeout( 'hover' );
});

$("td, th").livequery(function() {
    $(this).mousedown(function(event) {
        if (event.button == 2) {
            $("td, th").removeClass('selected');
            $(this).addClass('selected');
        }
        else {
            $(this).removeClass('selected');
        }

    }).contextMenu({
        menu: 'myToolMenu'
    }, function(action, el, pos) {
        var row = el.parent();
        table = el.parents('table');
        lastrow = table.find('tr:last');
       // lasttd = lastrow.find(':last').index();
        totalrows = lastrow.index();
        totalcols = lastrow.find('td:last').index();
        x = el.index();
        y = row.index();
        td = "<td></td>";

        // Index Function
        if (action == "index") {
            console.log("Rows: " + totalrows + ", Cols: " + totalcols);
            console.log("x: " + x + ", y: " + y);
        }
        // ==== Row Functions ====
        // Delete
        else if (action == "row-delete") {
            row.remove();
        }
        // Before
       ...