Contenteditable en tablas HTML

Con el código:

My_NameSurname
My_Name2Surname2

Puede editar una celda en una tabla HTML. Mi problema es cuando edito la celda y presiono enter , crea una nueva línea en la celda. Lo que realmente me gustaría es que, si presiono enter, vaya a la celda justo debajo de esa celda que acabo de editar para poder editar esa celda.

Actualmente tengo que usar el mouse para ir a la siguiente celda, pero si puedo presionar Enter e ir a la celda, me ayudará a editar las células un poco más rápido. Además, los datos actualizados se almacenarán en mi base de datos, por lo que tampoco quiero que se almacenen espacios innecesarios en la base de datos.

Pero no estoy seguro de lo que puedo hacer. ¿Hay algún ejemplo que pueda ver?

Descargo de responsabilidad: Este código requiere JQuery.

¿Algo como esto? http://jsfiddle.net/v2Tdn/3/

 $('td').keypress(function(evt){ if(evt.which == 13){ event.preventDefault(); var cellindex = $(this).index() // get next row, then select same cell index var rowindex = $(this).parents('tr').index() + 1 $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus() } }) 

* ACTUALIZACIÓN *

Tenga en cuenta que actualicé jsfiddle para seleccionar también el texto cuando presiona enter . Para el ejemplo anterior que solo se enfoca en el próximo TD, use http://jsfiddle.net/v2Tdn/1/ .

He creado una tabla “Cuadrícula” completamente editable en JS y HTML antes … y la lógica detrás de ella simplemente es la siguiente: 1- en tu tabla después de que diseñas todas tus columnas, agrega una columna de acción y agrega un enlace “editar” en cada fila que apunta a una función Editar, en este enlace Editar pasa el índice de la fila así que … se verá así:

 Edit" 

2- Su función de edición hará un simple bucle en sus columnas usando ese rowIndex y reemplazará los valores de texto con una etiqueta de cuadro de texto

 "" + tdTxt + "" 

Solo evite hacer la columna “Editar” Editable

ahora, debe tener una fila totalmente editable … en último lugar, debe agregar al lado del enlace “Editar” un enlace “Cancelar” que repetirá nuevamente en las columnas de Fila como el enlace Editar y Reemplazar las tags de texto con un intervalo o solo html puro con los “” valores originales …

Puede preguntarse cómo tendré los valores td originales, así que en este caso agregamos un campo oculto que lleva el valor td, por lo que cuando el usuario hace clic en cancelar después de editar. obtenemos el valor original de la celda antes de editar,

Espero que ayude.

Demostración que muestra cómo capturar y preventDefault acciones preventDefault al presionar la tecla Intro.

Aquí está el código que hace el truco:

 $('table').bind('keypress', function (e) { var code = e.keyCode || e.which; if (code == 13) { console.log("Enter pressed"); e.preventDefault(); // focus 'td' in next column using jQuery '.focus()' } return false; }); 

Tienes que entender que ‘contenteditable’ hace que tu marcado se comporte como un . Normalmente, las personas presionan la tecla tab para saltar de un campo de formulario a otro.

Utilizando la biblioteca jQuery javascript, puede leer el teclado para ingresar la clave, javascript para ‘escapar’ de la edición configurando el foco en otro lugar, tal vez la próxima td con contenteditable. :

 $(document).ready(function () { var $editableTd = $('td[contenteditable]'); $editableTd.bind('keypress', function (e) { var code = e.keyCode || e.which; if (code == 13) { var ind = $editableTd.index(this); //check next td to target $editableTd.eq(ind + 1).focus(); //set focus to it e.preventDefault(); //do 'nothing' } }); }); 

JsFiddled aquí