Cancel an action

Question

Cancel an action

Navigation

#1 by (8 votes)
#2 by (6 votes)
#3 by (4 votes)
#4 by (4 votes)
#5 by (1 votes)

7

I'm designing an html table with Jquery which only edits the records or just cancels when editing, which starts my problem here. Simply wish is that by pressing the cancel button return the data to as they were before, for example:

In my table delete the surname "Sanchez" by accident. Then I just press the cancel button and return the name "Sanchez" in my record as if it had not been edited.

On my "Cancel" button, just execute the input disabled in "true", nothing else, as 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.

jquery html

asked by Reinos Ric 03.04.2018 в 00:33

source

5 answers

6

I have changed several things in the html and the JQuery that are going to happen to use ids that you used to assign the function click to functions a assigned by the class as the first step. From there use the function .data () to save the value before being modified so that if you cancel the operation it will return to the original , in this example use value as a key to save the value. The rest is explained in the code. I hope it serves you.

// forma  de como asignar la funcion click a elementos con
// class edit o cancel

$(".edit").click(function() {
  //me ubico en el tr padre
  var tr = $(this).parent().parent();
  // obtengo los objetos html apellido y nombre y los guardo
  var nombre = tr.find("#nombre");
  var apellido = tr.find("#apellido");

  //condicional  de acuerdo si estas editando o guardando
  if ($(this).text() == "Editar") {

    //guardo los objetos con .data() antes de editarlos
    nombre.data("value", nombre.val());
    apellido.data("value", apellido.val());

    //busco en el bloque de html del tr al nombre y lo vuelvo editable
    nombre.prop("disabled", false);
    //busco en el bloque de html del tr al apellido y lo vuelvo editable
    apellido.prop("disabled", false);
    //cambio el texto de editar por guardar
    $(this).text("Guardar");

  } else {
    nombre.prop("disabled", true);
    apellido.prop("disabled", true);
    $(this).text("Editar");

  }

});

$(".cancel").click(function() {
  //me ubico en el tr padre
  var tr = $(this).parent().parent();

  // si esta editando cambia el texto
  if (tr.find("#edit").text() == "Guardar") {
    tr.find("#edit").text("Editar");

    // obtengo los objetos html apellido y nombre 
    var nombre = tr.find("#nombre");
    var apellido = tr.find("#apellido");

    // como se cancelo regreso al valor anterior con .data()
    nombre.val(nombre.data("value"));
    apellido.val(apellido.data("value"));

    //busco en el bloque de html del tr al nombre y apellido y los vuelvo disabled
    nombre.prop("disabled", true);
    apellido.prop("disabled", true);

  }

});

button {
  width: 100%;
}

<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="nombre" disabled value="Juan"></td>
      <td><input id="apellido" disabled value="sanchez"></td>
      <td><button id="edit" class="edit">Editar</button></td>
      <td><button id="cancel" class="cancel">Cancelar</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><input id="nombre" disabled value="Joanna"></td>
      <td><input id="apellido" disabled value="herrera"></td>
      <td><button id="edit" class="edit">Editar</button></td>
      <td><button id="cancel" class="cancel">Cancelar</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td><input id="nombre" disabled value="Marcos"></td>
      <td><input id="apellido" disabled value="lopez"></td>
      <td><button id="edit" class="edit">Editar</button></td>
      <td><button id="cancel" class="cancel">Cancelar</button></td>
    </tr>
  </tbody>
</table>

answered by 03.04.2018 в 01:32

4

You must save them before editing them. And so that value will not be lost. I did it only with the names, but you already understand the idea.

window.addEventListener("DOMContentLoaded", _ => {

var firstValues = {
 nombre1: document.getElementById("nombre1").value,
 apellido1: document.getElementById("apellido1").value,
 nombre2: document.getElementById("nombre2").value,
 apellido2: document.getElementById("apellido2").value,
 nombre3: document.getElementById("nombre3").value,
 apellido3: document.getElementById("apellido3").value
};

$("#Editar1").click(function(){		 
		    $("#nombre1").prop("disabled", false);
		     $("#apellido1").prop("disabled", false);
		   });
       
$("#Cancelar1").click(function(){		 
      document.getElementById("nombre1").value = firstValues.nombre1;
		    $("#nombre1").prop("disabled", true);
		     $("#apellido1").prop("disabled", true);
		   });
       
       
       $("#Editar2").click(function(){		 
		    $("#nombre2").prop("disabled", false);
		     $("#apellido2").prop("disabled", false);
		   });
       
$("#Cancelar2").click(function(){
document.getElementById("nombre2").value = firstValues.nombre2;
		    $("#nombre2").prop("disabled", true);
		     $("#apellido2").prop("disabled", true);
		   });
       
       
       $("#Editar3").click(function(){		 
		    $("#nombre3").prop("disabled", false);
		     $("#apellido3").prop("disabled", false);
		   });
       
$("#Cancelar3").click(function(){		 
document.getElementById("nombre3").value = firstValues.nombre3;
		    $("#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>

answered by 03.04.2018 в 01:01

4

I would change a series of things:

to start all the edit buttons do the same, enable the input that are in the same row so instead of using an id for each button, I use a class to identify the buttons and assign them a function to all who have this attribute class

The second thing I would do would be to remove the cancel button

Once the cancel button has been removed I use a dialog interface to change the value of input , this way I have some control over what is being changed

the fourth thing I would do would be to do everything by references, eg: if I click on an edit button, I go to the row of the button (element tr ) and search for the elements input to enable or disable them

doing all the above you have a cleaner code that is easy to read and maintainable.

PD: jQuery has the option to handle events on objects with an HTML element as an objective in this way you only use an event and not an event for each element that you want to execute the same action $ ( selector ). on ( event , goal , function to call ) example:

$('#tabla1').on('click','tr', function(){...});

the edited code would be the following:

// evento que se ejecuta al hacer click sobre el boton editar
$('.btnEditar').on('click', function(){
  // obtengo todos los input de la fila (tr) donde esta el boton clickeado
  var inputs = $(this).parent().parent().find('input');
  // para cada input de esta fila invierto el valor de la propiedad 'disabbled', de manera que si esta habilitado lo desabilita y viceversa
  $.each(inputs, function(key, value){
    $(value).prop('disabled',!$(value).prop('disabled'))
  })
  
})

// funcion que se ejecuta en el evento click de los input
$('#tabla1').on('click','input',function(){
  // al hacer click en un input me levanta un dialog con un input conteniendo el mismo valor del input clickeado
  var inputValue = prompt('Ingrese Valor', this.value);
  // si el valor es null significa que presiono 'cancelar' en caso contrario se guarda el valor ingresado
  if(inputValue !== null){
    this.value = inputValue;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tabla1" border=1 >
<thead>
  <tr>
    <th>Id</th><th>Nombre</th><th>Apellido</th>
  </tr>
</thead>
 <tbody>
   <tr>
     <td>1</td>
     <td><input disabled value="Juan"></td>
     <td><input disabled value="sanchez"></td>
     <td><button class="btnEditar">Editar</button></td>
   </tr>
   <tr>
     <td>2</td>
     <td><input disabled value="Joanna"></td>
     <td><input disabled value="herrera"></td>
     <td><button class="btnEditar">Editar</button></td>
   </tr>
   <tr>
     <td>3</td>
     <td><input disabled value="Marcos"></td>
     <td><input disabled value="lopez"></td>
     <td><button class="btnEditar">Editar</button></td>
   </tr>
 </tbody>
</table>

answered by 03.04.2018 в 01:18

1

You almost have it !! ... The elements of a <form> have the property defaultValue , with this you can make that when you press the button cancelar you replace the default values before the modification .

Starting from your code I leave you an example of how to do it

$("*[id^='Editar']").click( function(){
 $(this).closest("tr").find("input").each(function(){
  this.disabled = false;
 });
});

$("*[id^='Cancelar']").click( function(){
 $(this).closest("tr").find("input").each(function(){
  this.value = this.defaultValue;
  this.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>

answered by 28.04.2018 в 03:17

Texture in Sphere with Open GL Equivalence of "+=" of javascript in php?

score 8 · Accepted Answer

First 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 simply hide the input and show the original span. You would also need a "Save" button, to change the span text and hide the input.

Something like this:

$(".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>