Edit and Save data inline Table

Edita datos directamente en la fila de una tabla, para guardarlos posteriormente

by Porfirio Chavez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<table id="usuarios" class="table">
   <thead>
      <tr>
         <th>Nombre</th>
         <th>Usuario</th>
         <th>Tipo</th>
         <th>Correo electrĂłnico</th>
         <th>&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Administrador</td>
         <td> ada</td>
         <td>Administrador</td>
         <td>asdasd</td>
         <td>
            <input type="hidden" name="inId" value="1">
            <a class="btn btn-sm btn-default editar">Editar</a>
            <a class="btn btn-sm btn-default eliminar">Eliminar</a>
         </td>
      </tr>
      <tr>
         <td>Cesar Leal Gonzalezz</td>
         <td>clealzsd</td>
         <td>Administrador</td>
         <td>[email protected]</td>
         <td>
            <input type="hidden" name="inId" value="2">
            <a class="btn btn-sm btn-default editar">Editar</a>
            <a class="btn btn-sm btn-default eliminar">Eliminar</a>
         </td>
      </tr>
      <tr>
         <td>Gustavo Santaolalla</td>
         <td>guloco</td>
         <td>Cliente</td>
         <td>[email protected]</td>
         <td>
            <input type="hidden" name="inId" value="2">
            <a class="btn btn-sm btn-default editar">Editar</a>
            <a class="btn btn-sm btn-default eliminar">Eliminar</a>
         </td>
      </tr>
   </tbody>
</table>

CSS

/* VERSION ACTUALIZADA A BOOTSTRAP 3.3.x
EL 09/07/2015 */

JavaScript

$('table').on('click', '.editar', editarUsuario);
$('table').on('click', '.guardar', guardarUsuario);
$('table').on('click', '.eliminar', eliminarUsuario);

function editarUsuario(){
	$(this).removeClass("editar").addClass("guardar");
	
	nombre_editable = $(this).closest("tr").children().eq(0);
	nombre = nombre_editable.html();
	inNombre = "<input type='text' name='inNombre' class='form-control' value='"+nombre+"'>";
	nombre_editable.html(inNombre);
	
	usuario_edit = nombre_editable.next();
	usuario = usuario_edit.html();
	inUsuario = '<input type="text" name="inUsuario" class="form-control" value="'+usuario+'">';
	usuario_edit.html(inUsuario);
	
	tipo_edit = usuario_edit.next();
	tipo = tipo_edit.html();
	inTipo = '<select name="inTipo" class="form-control">';
	var opt = "";
	if(tipo == 'Cliente') {
		opt = "selected";
	}
	inTipo += '<option value="3"' + opt +'>Cliente</option>';
	opt = "";
	if(tipo == 'Operador') {
		opt = "selected";
	}
	inTipo += '<option value="2" '+ opt +'>Operador</option>';
	opt = "";
	if(tipo == 'Administrador') {
		opt = "selected";
	}			
	inTipo += '<option value="1" '+ opt +'>Administrador</option>' +
			'</select>';
	tipo_edit.html(inTipo);
	
	mail_edit = tipo_edit.next();
	mail = mail_edit.html();
	inMail = '<input type="text" name="inMail" class="form-control" value="'+ mail +'">';
	mail_edit.html(inMail);
	
	$(this).html("Guardar").addClass("btn-primary");
	
	return false;
}
/* #########################################
// VERSION RESUMIDA Zendo33 + elporfirio
########################################## */
function guardarUsuario(){    
    var tr = $(this).closest('tr');
    var tds = $(tr).find('td').not(':last');
    
    $.each(tds, function(){
        if(!$(this).children().is("select")){
            var value = $(this).children().val();
        }
        else {
            var value = $(this).children().find(":selected").text();
        }
        $(this).html(value);
    });
    
   ...