Right Click Table

by kthornbloom

HTML

<div contenteditable="true">
    <table width="100%">
        <tr>
            <td>1a</td>
            <td>2a</td>
            <td>3a</td>
            <td>4a</td>
            <td>5a</td>
            <td>6a</td>
        </tr>
        <tr>
            <td>1b</td>
            <td>2b</td>
            <td>3b</td>
            <td>4b</td>
            <td>5b</td>
            <td>6b</td>
        </tr>
        <tr>
            <td>1c</td>
            <td>2c</td>
            <td>3c</td>
            <td>4c</td>
            <td>5c</td>
            <td>6c</td>
        </tr>
    </table>
</div>

CSS

body {
    padding:30px;
}
table {
    border-collapse:true;
}
table td {
    border:1px solid #ccc;
    padding:5px;
}
.custom-menu {
    z-index: 100;
    position: absolute;
    background: #505050;
    border: 1px solid #7B7B7B;
    box-shadow: 0 0 0 1px, 0 4px 10px rgba(0, 0, 0, 0.31);
    border-radius: 3px;
}
.custom-menu a:link, .custom-menu a:visited {
    display:block;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    padding:5px 10px;
    border-bottom:1px solid #767676;
    i {
        width:15px;
        padding-right:5px;
        text-align:center;
    }
}

JavaScript

// Set temporary ID on selected element
$(function () {
    $(document).on('contextmenu', 'td', function (event) {
        $(this).attr('id', 'selected');
    });
});
// Make the menu
$(document).on('contextmenu', 'td', function (event) {
    event.preventDefault();
    $('div.custom-menu').hide();
    $('<div class="custom-menu"><a href="#" class="addrow">Add Row After</a><a href="#" class="delrow">Delete Row</a><a href="#" class="addcol">Add Column After</a><a href="#" class="delcol">Delete Column</a></div>')
        .appendTo("body")
        .css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
});

// Remove the menu
$(document).bind("click", function (event) {
    $("div.custom-menu").remove();
    $('#selected').removeAttr('id');
    event.preventDefault();
});

// Apply option to image you right-clicked on
$(document.body).on("click", ".fr", function (event) {
    $('#selected').removeClass().addClass('float-right').removeAttr('id');
    event.preventDefault();
});

// Add Row
$(document.body).on("click", ".addrow", function (event) {
    $('#selected').parents('table').attr('id', 'selectedTable');
    var whichOne = $('#selected').parent().index(),
        cols = $('#selectedTable tr:first-of-type td').length;
    
    $('<tr id="selectedRow"></tr>').insertAfter("#selectedTable tr:eq(" + whichOne + ")");
    for(var i = 0; i < cols; i++) {
        $('#selectedRow').append('<td>&nbsp;</td>');
    }
    $('#selectedRow, #selected, #selectedTable').removeAttr('id');
    event.preventDefault();
});

// Delete Row
$(document.body).on("click", ".delrow", function (event) {
    $('#selected').parents('tr').remove();
});

// Add Column
$(document.body).on("click", ".addcol", function (event) {
    $('#selected').parents('table').attr('id', 'selectedTable');
    var whichOne = $('#selected').index(),
        rows = $('#selectedTable tr').length;
    
    $('#selectedTable tr').each(function(){
       ...