Jeditable plugin para jQuery. Con unas pocas líneas de código JavaScript que le permiten hacer clic y editar el contenido de los diferentes elementos de XHTML.
Como Funciona
En esta oportunidad he realizado una aplicación donde listo registros de una tabla usuarios.
Cuando el usuario hace clic en la celda de la fila , el bloque de texto se convierte en un formulario, para que el usuario pueda editar el contenido pulsando enter o presiona el botón Enviar, luego nuevo texto se envía al servidor web y se guardara quedando con el nuevo texto.
Incluimos las librerias
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jeditable.js"></script>
JS
dijo:$(document).ready(function() {
// ambos procesaran en save.php
// servira para editar los de tipo input text.
$('.text').editable('save.php');
// servira para editar el cuadro combinado de paises
$('.select').editable('save.php', {
data : " {'1':'Argentina','2':'Bolivia','3':'Peru', '4':'Chile'}",
type : 'select',
submit : 'OK'
});
// servira para editar el textarea.
$('.textarea').editable('save.php', {
type : 'textarea',
submit : 'OK'
});
});
Listado de registros de la tabla usuarios
dijo:<fieldset id="content">
<legend>Editando registros de una tabla con Jeditable plugin jQuery.</legend>
<table id="table">
<thead>
<tr class="head">
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
<th>Email</th>
<th>Pais</th>
<th>Observaciones</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array($query))
{
$id = $row['id_usuario'];
?>
<tr>
<td><div class="text" id="nombre_usuario-<?php echo $id ?>"><?php echo $row['nombre_usuario']?></div></td>
<td><div class="text" id="apellido_usuario-<?php echo $id ?>"><?php echo $row['apellido_usuario']?></div></td>
<td><div class="text" id="edad_usuario-<?php echo $id ?>"><?php echo $row['edad_usuario']?></div></td>
<td><div class="text" id="email_usuario-<?php echo $id ?>"><?php echo $row['email_usuario']?></div></td>
<td><div class="select" id="id_pais-<?php echo $id ?>"><?php echo $paises[$row['id_pais']]?></div></td>
<td><div class="textarea" id="observacion_usuario-<?php echo $id ?>"><?php echo $row['observacion_usuario']?></div></td>
</tr>
<?php
}
?>
</tbody>
</table>
</fieldset>
save.php, se realizara la actualizacion de todos los campos de la tabla usuarios
dijo:<?php
include( "conexion.php" );
$data = explode("-",$_POST['id']);
$campo = $data[0]; // nombre del campo
$id = $data[1]; // id del registro
$value = $_POST['value']; // valor por el cual reemplazar
$paises = array(
"1"=>"Argentina",
"2"=>"Bolivia",
"3"=>"Peru",
"4"=>"Chile"
);
// sql para actualizar el registro
$query = mysql_query("UPDATE usuarios SET ".$campo." = '".$value."'
WHERE id_usuario = '".$id."'" );
echo ($campo == 'id_pais') ? $paises[$value] : $value;
?>
FUENTE