JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="http://www.appelsiini.net/download/jquery.jeditable.js"></script>
<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</div>
<table class="reference" border=1 style="width:100%">
<tbody><tr>
	<th>Number</th>
	<th>First Name</th>
	<th>Last Name</th>		
	<th>Points</th>
    
</tr>
<tr class='activo'>
	<td class='edit'>1</td>
	<td class='edit'>Eve</td>
	<td class='edit'>Jackson</td>		
	<td class='edit'>94</td>
    <td class='guarda'>GUARDA</td>
</tr>
<tr>
	<td class='edit'>2</td>
	<td class='edit'>John</td>
	<td class='edit'>Doe</td>		
	<td class='edit'>80</td>
    <td class='guarda'>GUARDA</td>
</tr>
<tr>
	<td>3</td>
	<td>Adam</td>
	<td>Johnson</td>		
	<td>67</td>
    <td class='guarda'>GUARDA</td>
</tr>
<tr>
	<td>4</td>
	<td>Jill</td>
	<td>Smith</td>		
	<td>50</td>
    <td class='guarda'>GUARDA</td>
</tr>
</tbody></table>

JavaScript

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
     });
     $('.edit_area').editable('http://www.example.com/save.php', {
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="img/indicator.gif">',
         tooltip   : 'Click to edit...'
     });
 });