jQuery数据表，删除行，添加行和编辑行问题

Question

我有一张桌子，我想添加，删除和编辑行。 添加效果很好，但编辑和删除工作不正常。 当我删除某些行时有时我无法保存我在第一行或最后一行编辑的内容和/或行的输入字段不会显示。

我用： 数据表和快捷方式。

HTML部分：

<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;
                }
    });
});