jQuery: Edit table inline

Edit data on table for prevent add view to form and improve the UX.

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="userTable" class="table">
   <thead>
      <tr>
         <th>Name</th>
         <th>User</th>
         <th>UserType</th>
         <th>eMail</th>
         <th>&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Super Admin</td>
         <td>admin</td>
         <td>Administrator</td>
         <td>[email protected]</td>
         <td>
            <input type="hidden" name="inputId" value="1">
            <a class="btn btn-sm btn-info edit">Edit</a>
            <a class="btn btn-sm btn-danger delete">Delete</a>
         </td>
      </tr>
      <tr>
         <td>Cesar Leal Gonzalez</td>
         <td>clealzsd</td>
         <td>Operator</td>
         <td>[email protected]</td>
         <td>
            <input type="hidden" name="inputId" value="2">
            <a class="btn btn-sm btn-info edit">Edit</a>
            <a class="btn btn-sm btn-danger delete">Delete</a>
         </td>
      </tr>
      <tr>
         <td>Gustavo Santaolalla</td>
         <td>guloco</td>
         <td>Customer</td>
         <td>[email protected]</td>
         <td>
            <input type="hidden" name="inputId" value="3">
            <a class="btn btn-sm btn-info edit">Edit</a>
            <a class="btn btn-sm btn-danger delete">Delete</a>
         </td>
      </tr>
   </tbody>
</table>

CSS

/* VERSION ACTUALIZADA A BOOTSTRAP 3.3.x
EL 09/07/2015 */
body {
  background-color: #c8e4fe;
}

table {
  background-color: #feffe0;
}

JavaScript

function editUser(){
	$(this).removeClass("edit").addClass("save");
	
	var nameCell = $(this).closest("tr").children().eq(0);
	var name = nameCell.html();
	var inputName = "<input type='text' name='name' class='form-control' value='"+name+"'>";
	nameCell.html(inputName);
	
	var userCell = nameCell.next();
	var user = userCell.html();
	var inputUser = '<input type="text" name="user" class="form-control" value="'+user+'">';
	userCell.html(inputUser);
	
	var userTypeCell = userCell.next();
	var userType = userTypeCell.html();
	var selectType = '<select name="userType" class="form-control">';
	var isSelected = "";
	if(userType == 'Customer') {
		isSelected = "selected";
	}
	selectType += '<option value="3"' + isSelected +'>Customer</option>';
	isSelected = "";
	if(userType == 'Operator') {
		isSelected = "selected";
	}
	selectType += '<option value="2" '+ isSelected +'>Operator</option>';
	isSelected = "";
	if(userType == 'Administrator') {
		isSelected = "selected";
	}			
	selectType += '<option value="1" '+ isSelected +'>Administrator</option>';
	selectType += '</select>';
  
	userTypeCell.html(selectType);
	
	var emailCell = userTypeCell.next();
	var email = emailCell.html();
	var inputEmail = '<input type="text" name="email" class="form-control" value="'+ email +'">';
	emailCell.html(inputEmail);
	
	$(this).html("Save").removeClass('btn-info').addClass("btn-primary save");
	
	return;
}

function saveUser(){
	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);
  });
    
  $(this).html("Edit").removeClass("btn-primary save").addClass('btn-info edit');
    
	return;
}

function deleteUser(){
	var tr = $(this).closest('tr');
  if(confirm('Do you want delete user?')){
  	tr.remove();
  }
}

//...