Edit the table cell by keypress

[AlexDag]

Does exist the way to edit cell from javascript as doing this> "the mouse click over table cell"?
Now, pressing Enter over editing cell do close Editor. I want to return to edit the same cell by press Enter or other key without the mouse click. I have the control what is current cell. thanks

[Mottie]

Hi @AlexDag!

If you set the editable_enterToAccept option to false, it will not accept and blur the cell (demo).

[AlexDag]

hi Mottie,
thanks , I tried it, for changing the cell of the same row without to close editor: the tabs key run well.
Now my client want to navigate on table using "up-down" keys for change the rows.
I can indicate where client is , what it is the current cell, but how to move editor in this cell of other row by pressing "up-down" keys?

The whole requirement is that "edit cell > press some key for close Editor > press navigation keys for change:rows,cells(up-dn-right-left) > press some key for open Editor>edit cell >......"

thanks..

[Mottie]

Try this (demo):

$(function() {
  function editComplete(el) {
    var $el = $(el),
      newContent = $el.text(),
      // there shouldn't be any colspans in the tbody
      cellIndex = el.cellIndex,
      // data-row-index stored in row id
      rowIndex = $el.closest("tr").attr("id");
    /*
    $.post("mysite.php", {
      "row": rowIndex,
      "cell": cellIndex,
      "content": newContent
    });
    */
  }

  function moveCells(el, dir) {
    var $el = $(el),
      changed = false,
      // there shouldn't be any colspans in the tbody
      cellIndex = el.cellIndex,
      $allRows = $el.closest("tbody").find("tr"),
      rowIndex = $allRows.index($el.closest("tr"));
    if (dir === "ArrowUp" && rowIndex - 1 >= 0) {
      rowIndex--;
      changed = true;
    } else if (dir === "ArrowDown" && rowIndex + 1 < $allRows.length) {
      rowIndex++;
      changed = true;
    }
    if (changed) {
      $el.blur();
      $allRows
        .eq(rowIndex)
        .find("td")
        .eq(cellIndex)
        .find("[contenteditable]")
        .focus();
    }
  }

  $("#table")
    .tablesorter({
      theme: "blue",

      widgets: ["editable"],
      widgetOptions: {
        // or "0-2" (v2.14.2); point to the columns to make editable
        // (zero-based index)
        editable_columns: [0, 1, 2],
        // press enter to accept content, or click outside if false
        editable_enterToAccept: false,
        // accepts any changes made to the table cell automatically
        editable_autoAccept: true,
        // auto resort after the content has changed.
        editable_autoResort: false,
        // return a valid string:
        // function(text, original, columnIndex){ return text; }
        editable_validate: null,
        editable_focused: function(txt, columnIndex, $element) {
          // $element is the div, not the td
          // to get the td, use $element.closest('td')
          $element.addClass("focused");
        },
        editable_blur: function(txt, columnIndex, $element) {
          // $element is the div, not the td
          // to get the td, use $element.closest('td')
          $element.removeClass("focused");
        },
        // note $element is the div inside of the table cell, so use
        // $element.closest('td') to get the cell only select everthing
        // within the element when the content starts with the letter "B"
        editable_selectAll: function(txt, columnIndex, $element) {
          return /^b/i.test(txt) && columnIndex === 0;
        },
        // trim content inside of contenteditable
        // ( remove tabs & carriage returns )
        editable_trimContent: false,
        // wrap all editable cell content... makes this widget work in
        // IE, and with autocomplete
        editable_wrapContent: "<div>",
        // class name of cell that is not editable
        editable_noEdit: "no-edit",
        // event fired after the table content has been edited
        editable_editComplete: "editComplete"
      }
    })
    // config event variable new in v2.17.6
    .children("tbody")
    .on("editComplete keyup", "td", function(event, config) {
      if (event.type === "editComplete") {
        editComplete(this);
      } else if (event.key.indexOf("Arrow") === 0) {
        moveCells(this, event.key);
      }
    });
});

[AlexDag]

it run well in my project, amazing! thanks...