I have a table and I want to add, delete and edit rows. Adding works great, but edit and delete aren't working properly. When I delete some rows sometimes I can't save the things I edited in the first or last row and/or the input fields of the row wont show up.

I use: Datatable and shortcut.

HTML Part:

<td><img id ="addButton" src="../images/add_up.png" onmouseover="this.src='../images/add_over.png'" onmouseout="this.src='../images/add_up.png'" onclick="this.src='../images/add_down.png'" /></td>
<table class="display" id="example" onclick=editRow(this.id, nRow);>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

js Part:

function restoreRow(oTable, nRow) {
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
        oTable.fnUpdate(aData[i], nRow, i, false);
    }
    oTable.fnDraw();
}

function editRow(oTable, nRow) {
    var aData = oTable.fnGetData(nRow);
    var nummer = tabellenInhaltsDaten.length;


    var acctualRowIndex = nRow.rowIndex - 1;
    aData[0] = "1";
    aData[1] = "2";
    aData[2] = "3";
    aData[3] = "4";
    var jqTds = $('>td', nRow);
    jqTds[0].innerHTML = '<input type="text" maxlength="2"  size="3" value="' + (aData[0]) + '">';
    jqTds[1].innerHTML = '<input type="text" maxlength="2"  size="3" value="' + (aData[1]) + '">  ';
    jqTds[2].innerHTML = '<input type="text" maxlength="2"  size="3" value="' + (aData[2]) + '">';
    jqTds[3].innerHTML = '<input type="text" maxlength="2"  size="3"  value="' + (aData[3]) + '">';
}

function saveRow(oTable, nRow) {
    var jqInputs = $('input', nRow);
    oTable.fnUpdate((jqInputs[0].value), nRow, 0, false);
    oTable.fnUpdate((jqInputs[1].value), nRow, 1, false);
    oTable.fnUpdate((jqInputs[2].value), nRow, 2, false);
    oTable.fnUpdate((jqInputs[3].value), nRow, 3, false);
    oTable.fnUpdate('<a class="delete"><img id= "deleteButton" src="../images/delete_up.png" /></a>', nRow, (5), false);
    var acctualRowIndex = nRow.rowIndex - 1;
    isRowEdit = false;
    isEnterPressed = false;
}


$(document).ready(function() {
    oTable = $('#example').dataTable({
        "bPaginate" : false,
        "bFilter" : false,
        "bInfo" : false,
        "bSortable" : true,
        "bSort" : true
    });


    var nEditing = null;
    $('#addButton').click(function(e) {

        e.preventDefault();
        var aiNew = oTable.fnAddData(['', '', '', '', '', countAddedRows]);
        var nRow = oTable.fnGetNodes(aiNew[0]);
        editRow(oTable, nRow);
        nEditing = nRow;
        saveRow(oTable, nRow);
    });

    $('#example a.delete').live('click', function(e) {
        e.preventDefault();
        var nRow = $(this).parents('tr')[0];
        oTable.fnDeleteRow(nRow);
    });

    $('#example td ').live('click', function(e) {
        shortcut.add("enter", function() {
            saveRow(oTable, nRow);
            nEditing = null;
        });
        e.preventDefault();
        var nRow = $(this).parents('tr')[0];
        if (nEditing !== null && nEditing != nRow) {
                    /*Currently editing - but not this row - restore the old before continuing to edit mode */
                    restoreRow(oTable, nEditing);
                    editRow(oTable, nRow);
                    nEditing = nRow;
                } else if (nEditing == nRow && this.innerHTML == "Save") {
                    /* Editing this row and want to save it */
                    saveRow(oTable, nEditing);
                    nEditing = null;
                } else {
                    /* No edit in progress - let's start one */
                    editRow(oTable, nRow);
                    nEditing = nRow;
                }
    });
});

• javascript
• jquery
• html
• jquery-datatables