html – Cancel an action

Question:

I am designing an html table with Jquery which only edits the records or simply cancels at the time of editing, which here my problem begins. I just wish is that pressing the cancel button will return the data to how it was before, for example:

In my table I accidentally deleted the last name "Sanchez". Then I just press the cancel button and it returns the last name "Sanchez" in my registry as if it had not been edited.

In my "Cancel" button it only executes the disabled input on "true", nothing else, because I have no idea how to return the data that was edited by accident.

I show you my code so that you can help me:

$("#Editar1").click(function(){		 
		    $("#nombre1").prop("disabled", false);
		     $("#apellido1").prop("disabled", false);
		   });
       
$("#Cancelar1").click(function(){		 
		    $("#nombre1").prop("disabled", true);
		     $("#apellido1").prop("disabled", true);
		   });
       
       
       $("#Editar2").click(function(){		 
		    $("#nombre2").prop("disabled", false);
		     $("#apellido2").prop("disabled", false);
		   });
       
$("#Cancelar2").click(function(){		 
		    $("#nombre2").prop("disabled", true);
		     $("#apellido2").prop("disabled", true);
		   });
       
       
       $("#Editar3").click(function(){		 
		    $("#nombre3").prop("disabled", false);
		     $("#apellido3").prop("disabled", false);
		   });
       
$("#Cancelar3").click(function(){		 
		    $("#nombre3").prop("disabled", true);
		     $("#apellido3").prop("disabled", true);
		   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1 >
<thead>
  <tr>
    <th>Id</th><th>Col 2</th><th>Col 3</th>
  </tr>
</thead>
 <tbody>
   <tr>
     <td>1</td>
     <td><input id="nombre1" disabled value="Juan"></td>
     <td><input id="apellido1" disabled value="sanchez"></td>
     <td><button id="Editar1">Editar</button></td>
     <td><button id="Cancelar1">Cancelar</button></td>
   </tr>
   <tr>
     <td>2</td><td><input id="nombre2" disabled value="Joanna"></td><td><input id="apellido2" disabled value="herrera"></td>
     <td><button id="Editar2">Editar</button></td>
     <td><button id="Cancelar2">Cancelar</button></td>
   </tr>
   <tr>
     <td>3</td><td><input id="nombre3" disabled value="Marcos"></td><td><input id="apellido3"  disabled value="lopez"></td>
     <td><button id="Editar3">Editar</button></td>
     <td><button id="Cancelar3">Cancelar</button></td>
   </tr>
 </tbody>
</table>

I hope you can help me, thank you.

Answer:

First of all you should use classes instead of ID's so as not to repeat the code. As for your question, you can use a span that contains the text. When you press "Edit" you hide the span and show the input. If you press Cancel, you just hide the input and show the original span. You will also need a "Save" button, to change the span text and hide the input.

Something like that:

$(".editar").click(function(){
    var tr = $(this).closest('tr');
    tr.find('input').show();
    tr.find('span').hide();
    $(this).hide();
    tr.find('.guardar').show();    
});
       
$(".cancelar").click(function(){
    var tr = $(this).closest('tr');
    tr.find('span').show();
    tr.find('input').hide();
    tr.find('.guardar').hide();
    tr.find('.editar').show();
});

$(".guardar").click(function(){
    var tr = $(this).closest('tr');
    var spans = tr.find('span');
    $.each(spans, function(i, span) {
	var input = $(this).siblings('input');
        $(this).html(input.val());
    });
    spans.show();
    tr.find('input').hide();
    $(this).hide();
    tr.find('.editar').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1 >
<thead>
  <tr>
    <th>Id</th><th>Col 2</th><th>Col 3</th>
  </tr>
</thead>
 <tbody>
   <tr>
     <td>1</td>
     <td><span>Juan</span><input style="display:none;" value="Juan"></td>
     <td><span>sanchez</span><input style="display:none;" value="sanchez"></td>
     <td><button class="editar">Editar</button><button style="display:none;" class="guardar">Guardar</button></td>
     <td><button class="cancelar">Cancelar</button></td>
   </tr>
   <tr>
     <td>2</td><td><span>Joanna</span><input style="display:none;" value="Joanna"></td><td><span>herrera</span><input style="display:none;" value="herrera"></td>
     <td><button class="editar">Editar</button><button style="display:none;" class="guardar">Guardar</button></td>
     <td><button class="cancelar">Cancelar</button></td>
   </tr>
   <tr>
     <td>3</td><td><span>Marcos</span><input style="display:none;" value="Marcos"></td><td><span>lopez<input style="display:none;" value="lopez"></td>
     <td><button class="editar">Editar</button><button style="display:none;" class="guardar">Guardar</button></td>
     <td><button class="cancelar">Cancelar</button></td>
   </tr>
 </tbody>
</table>
Post Views: 0
Scroll to Top