Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] <td contenteditable> -> <input>

Estas en el tema de <td contenteditable> -> <input> en el foro de Jquery en Foros del Web. Tengo una TABLE de HTML rellenada con un MYSQLI_QUERY() Tiene una columna adicional para los BUTTONs: ACTUALIZAR y BORRAR +---------+-----------+-----------+ EJEMPLO: | Nombre | Apellidos ...
  #1 (permalink)  
Antiguo 11/06/2019, 08:39
 
Fecha de Ingreso: enero-2008
Mensajes: 571
Antigüedad: 11 años, 9 meses
Puntos: 9
<td contenteditable> -> <input>

Tengo una TABLE de HTML rellenada con un MYSQLI_QUERY()

Tiene una columna adicional para los BUTTONs: ACTUALIZAR y BORRAR

+---------+-----------+-----------+
EJEMPLO: | Nombre | Apellidos | EDIT DEL |
+---------+-----------+-----------+
| TD | TD | TD |
+---------+-----------+-----------+

En el caso del BUTTON ACTUALIZAR:
He probado a poner INPUTs dentro de los TDs, pero como la TABLE tiene un plugin de JQUERY DataTable este pierde su funcionalidad de busqueda y ordenado

Entonces he pensado en lo siguiente:
Código HTML:
<td contenteditable form="actualizar4" name="nombre"> 
Y mediante JQUERY que copie el contenido en:
Código HTML:
<input editable form="actualizar4" name="nombre" value="__RECUPERANDO_CAMPO__"> 
De tal forma que JQUERY detecte los contenteditable y copie su contenido en los input correspondientes

Gracias por la ayuda, pues aun no tengo claro como empezar a declararlo en JQUERY
  #2 (permalink)  
Antiguo 11/06/2019, 10:16
 
Fecha de Ingreso: enero-2008
Mensajes: 571
Antigüedad: 11 años, 9 meses
Puntos: 9
He llegado hasta este código:
Código HTML:
	$("[contenteditable]").keydown(function(e){e.which==13 && e.preventDefault()});

	$("td").keyup(function(){
		console.log($(this).text());
		console.log($(this).attr("data-form"));
		console.log($(this).attr("data-name"));
		console.log($(this).attr("data-value"));
	});
En el formulario con los campos ocultos, entregare en los INPUTs los datos recibidos... cuando sepa con certeza como ir haciendolo... sigo viendo el manual de JQUERY

Agradezco cualquier sijerencia, gracias
  #3 (permalink)  
Antiguo 11/06/2019, 19:15
 
Fecha de Ingreso: enero-2008
Mensajes: 571
Antigüedad: 11 años, 9 meses
Puntos: 9
Respuesta: <td contenteditable> -> <input>

Código:
$("td").keyup(function(){
		$("[id=\""+$(this).attr("data-form")+"\"]>[name=\""+$(this).attr("data-name")+"\"]").attr('value',$.trim($(this).text()));
	});



La zona horaria es GMT -6. Ahora son las 10:56.