title: jQuery Datatables, delete row ,add row and edit row problems
body: <p>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.</p>
  
  <p>I use:
  Datatable and shortcut.</p>
  
  <p>HTML Part:</p>
  
  <pre><code>&lt;td&gt;&lt;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'" /&gt;&lt;/td&gt;
  &lt;table class="display" id="example" onclick=editRow(this.id, nRow);&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>js Part:</p>
  
  <pre><code>function restoreRow(oTable, nRow) {
      var aData = oTable.fnGetData(nRow);
      var jqTds = $('&gt;td', nRow);
      for (var i = 0, iLen = jqTds.length; i &lt; 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 = $('&gt;td', nRow);
      jqTds[0].innerHTML = '&lt;input type="text" maxlength="2"  size="3" value="' + (aData[0]) + '"&gt;';
      jqTds[1].innerHTML = '&lt;input type="text" maxlength="2"  size="3" value="' + (aData[1]) + '"&gt;  ';
      jqTds[2].innerHTML = '&lt;input type="text" maxlength="2"  size="3" value="' + (aData[2]) + '"&gt;';
      jqTds[3].innerHTML = '&lt;input type="text" maxlength="2"  size="3"  value="' + (aData[3]) + '"&gt;';
  }
  
  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('&lt;a class="delete"&gt;&lt;img id= "deleteButton" src="../images/delete_up.png" /&gt;&lt;/a&gt;', 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 &amp;&amp; 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 &amp;&amp; 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;
                  }
      });
  });
  </code></pre>