JSFiddle - React, Tailwind, and code Playground

by Michael Eugene Yuen

HTML

<table>
  <tr data-field="name">
  <td>Name</td>
  <td class="input">John Doe</td>
  <td><span class="edit">Edit Info</span></td>
  </tr>
  <tr data-field="email">
  <td>Email</td>
  <td class="input">johndoe@email.com</td>
  <td><span class="edit">Edit Info</span></td>
  </tr>
</table>

CSS

table tr td {
  padding: 12px 15px;
  border-bottom: 1px solid #d6d6d6;
  box-sizing: border-box;
}

.edit {
  color: blue;
  cursor: pointer;
}

.editable {
  background-color: #FFF;
  border: 1px solid #d6d6d6;
}

.button {
  background-color: blue;
  color: #FFF;
  border-radius: 8px;
  line-height: 18px;
  padding: 5px 8px;
  text-align: center;
}

JavaScript

$('.edit').click(function(){
	// uid = userid
	var uid = '123';
  var self = $(this);
  // closest in the parent elements
  // use .find with caution unless you sure you have only one .input
  // contenteditable makes element editable. use with caution as it accepts html tags, javascript
  // .addClass for styling
  var input = self.closest('tr').find('.input');
  input.attr('contenteditable','true').addClass('editable');
  self.closest('td').html('<span class="button">Save</span>');
  $('.button').click(function(e){
  	e.preventDefault();
		var field = $(this).closest('tr').data('field');
    // get text instead of html from editable tr
  	var value = $(this).closest('tr').find('.input.editable').text();
    if (value.length > 0) {
  	var dataString = 'edit_info=' + uid + '&field=' + field + '&value=' + value;
    alert(dataString);
//		$.ajax({
//			type: "POST",
//      url: "ajax.php",
//      data: dataString,
//      success: function(data){
//      	if (data == 'success') {
        input.attr('contenteditable','false').removeClass('editable');
        $(this).closest('td').html('<span class="edit">Edit Info</span>');
//				}
//			}
//		});
	return false;
		};
  });
	return false;
});