Dynamic Table Row and Column Editing with Javascript / jQuery

This fiddle quickly demonstrates how to create a dynamic editable table to which you can add and remove rows and columns quite easily, with Javascript and jQuery v1.11.0

by jeanlescure

HTML

Columns: <input id="tableCols" type="text" name="cols" value=""/>
Rows: <input id="tableRows" type="text" name="rows" value=""/>
<button onClick="updateTable()">Update Table</button>

<div class="table-holder">
    <table id="editTable" border="1">
        <thead>
            <tr>
                <th>Headers</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row1</td>
            </tr>
        </tbody>
    </table>
</div>
<button onClick="loadData(tableData)">Load Table Data</button>

CSS

#editTable th input{font-weight:bold;}

/* Eye candy */
.table-holder{display:table;box-shadow:10px 10px 5px #888;border:1px solid #404460;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;margin:20px 0 50px 0;padding:0;}
.table-holder table{border-collapse:collapse;border-spacing:0;height:100%;margin:0;padding:0;}
.table-holder tr:last-child td:last-child{-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;border-width:0;}
.table-holder table tr:first-child th:first-child{-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;}
.table-holder table tr:first-child td:last-child{-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;}
.table-holder tr:last-child td:first-child{-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;}
.table-holder tr:nth-child(even){background-color:#aad4ff;}
.table-holder tr:nth-child(odd){background-color:#fff;}
.table-holder td{vertical-align:middle;border:1px solid #404460;text-align:left;font-size:16px;font-family:Arial;font-weight:400;color:#000;border-width:0 1px 1px 0;padding:7px;}
.table-holder tr:last-child td{border-width:0 1px 0 0;}
.table-holder tr:first-child th{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf",endColorstr="#005fbf");background:0;background-color:#005fbf;border:0 solid #404460;text-align:center;font-size:16px;font-family:Arial;font-weight:700;color:#fff;border-width:0 0 1px 1px;}
.table-holder tr:first-child:hover...

JavaScript

var tableData = [
        [ "h0" , "h1" ],
        [ "r0c0" , "r0c1" ],
        [ "r1c0" , "r1c1" ]
    ];

function updateTable(){
    removeButtons();
    
    iRows = checkTableVal($('#tableRows'));
    iCols = checkTableVal($('#tableCols'));    
    
    updateRows(iRows,iCols);
    updateCols(iCols,iRows);
    
    addButtons();
}

function checkTableVal(tblinput){
    if (tblinput.val() < 1) tblinput.val(1);
    return tblinput.val();
}

function updateRows(nRows,nCols){
    numRows = $('#editTable tbody').children().length;
    numDiff = nRows-numRows;
    if (numDiff > 0){
        for (var i = 0; i < numDiff; i++){
            $('#editTable tbody').append('<tr><td>Row'+ (numRows + i + 1) +'</td></tr>');
        }
    }else if (numDiff < 0){
        for (var i = numDiff; i < 0; i++){
            $('#editTable tbody tr').last().remove();
        }
    }
}

function updateCols(nCols,nRows){
    numCols = $('#editTable thead tr').children().length - 1;
    numDiff = nCols-numCols;
    if (numDiff >= 0){
        for (var i = 0; i < nRows; i++){
            for (var j = 0; j < nCols; j++){
                if (i == 0 && !$('#editTable thead tr:eq(0) th:eq(' + (j + 1) + ')').length) $('#editTable thead tr').append('<th><input type="text" name="h' + j + '" value=""/></th>');
                appendable = '<td><input type="text" name="r' + i + 'c' + j +'" value=""/></td>';
                if (!$('#editTable tbody tr:eq(' + i + ') td:eq(' + (j + 1) + ')').length) $('#editTable tbody tr:eq(' + i + ')').append(appendable);
            }
        }
    }else if (numDiff < 0){
        for (var i = 0; i < nRows; i++){
            for (var j = numDiff; j < 0; j++){
                if (i == 0) $('#editTable thead tr th').last().remove();
                $('#editTable tbody tr:eq(' + i + ') td').last().remove();
            }
        }
    }
}

function addButtons(){
    numRows = $('#editTable tbody').children().length
    
    for (var i = 0; i < numRows; i++){
        var...