I am designing an html table with Jquery which only edits the records or simply cancels when editing, which is where my problem begins. My only wish is that pressing the cancel button returns the data to the way 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 surname "Sanchez" in my record as if it had not been edited.
In my "Cancel" button, it only executes the disabled of the inputs in "true", nothing else, because I have no idea how to return the data that was edited by accident.
I show you my code so 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, thanks.
First of all you should use classes instead of ID's to avoid repeating the code. Regarding 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 simply hide the input and show the original span. You would also need a "Save" button, to change the text of the span and hide the input.
Something like that:
I have changed several things in the html and the JQuery that go from using ids that you used to assign the click function to functions assigned by it
class
as the first step. Hence use the .data() function to save the value before being modified so that if you cancel the operation it returns to the original , in this example usevalue
as a key to save the value. The rest is explained in the code. I hope it helps you.You must save them before editing them. And so that value will not be lost. I did it just with the names, but you get the idea.
I would change a number of things:
input
that are in the same row so instead of using an id for each button, I use aclass
to identify the buttons and assign a function to all those that have this attributeclass
input
, this way I have some control over what is being changed.tr
) and look for the elementsinput
to enable or disable themdoing all of the above you are left with cleaner code that is easy to read and maintainable.
PS: jQuery has the option to handle events on objects with an HTML element as target so you only use one event and not one event for each element you want to execute the same action $( selector ).on( event , target , function to call ) example:
the edited code would be as follows:
You almost have it!!... The elements of an
<form>
account with the propertydefaultValue
, with this you can make that when you press the buttoncancelar
you return to the default values before the modification.Starting from your code I leave you an example of how to do it