Edit rows of a table with jquery

Question

Edit rows of a table with jquery

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm starting to work with JQUERY in my project in which I generate a table from a function with AJAX, for each record besides the data, I generate a column with a button to edit, the problem is that I need to press the edit button; on the same value column (Total Amount), an input with the value of this appears and you can edit it from your site. I attach an image of what my table generates .

I need that when clicking on edit, an input appears with the amount in this case 30.00 and I can edit it from there. This is my function:

function get(){
    var id = $('#Id').val();
    $.ajax({
      url:baseurl+"reserva/get",
      type:"POST",
      data:{id:id},
      success:function(data){
          var registros = eval(data);
          html ="<table class='table'><thead>";
          html +="<tr><th>#</th><th>Total Monto</th><th>Fecha de Registro</th><th>Opciones</th></tr>";
          html +="</thead><tbody>";
          for (var i = 0; i < registros.length; i++) {
            html +="<tr><td>"+registros[i]["contador"]+"</td><td>"+registros[i]["Monto"]+" </td><td>"+registros[i]["Fecha"]+"</td><td><a title='Editar' class='btn btn-sm btn-squared margin-inline'><i class='fa fa-pencil' aria-hidden='true'></i></a></td></tr>";
          };
          $("#lista").html(html);
        }
      }
    });
  }

javascript jquery php ajax

asked by FeRcHo 07.09.2017 в 21:51

source

2 answers

1

There are many ways to do what you want, here I leave one (based on your code) of what I think is the easiest way to do it, it will be on your part to improve it.

Example:

registros = {
 length:3,
 0:{"contador":1,"Monto":30,"Fecha":"2017-09-07 11:51:15"
 },
 1:{"contador":2,"Monto":30,"Fecha":"2017-09-07 11:51:15"
 },
 2:{"contador":3,"Monto":30,"Fecha":"2017-09-07 11:51:15"
 }
}
html ="<table class='table'><thead>";
html +="<tr><th>#</th><th>Total Monto</th><th>Fecha de Registro</th><th>Opciones</th></tr>";
html +="</thead><tbody>";
for (var i = 0; i < registros.length; i++) {
 html +="<tr><td>"+registros[i]["contador"]+"</td><td><input id='edit"+registros[i]["contador"]+"' value='"+registros[i]["Monto"]+"' disabled> </td><td>"+registros[i]["Fecha"]+"</td><td><input type='button' value='Editar' onclick='z=document.getElementById(\"edit"+registros[i]["contador"]+"\");z.disabled=\"\";z.focus();z.select();'><i class='fa fa-pencil' aria-hidden='true'></td></tr>";
};
$("#lista").html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lista">
</div>

I hope this helps you, Regards! ;)) ...

answered by 08.09.2017 в 04:28

List WhatsApp contacts I want to change my right and left of a css class from javascript and I can not

score 1 · Accepted Answer

Adjust the editable column, the button and create a function:

function get(){
var id = $('#Id').val();
$.ajax({
  url:baseurl+"reserva/get",
  type:"POST",
  data:{id:id},
  success:function(data){
      var registros = eval(data);
      html ="<table class='table'><thead>";
      html +="<tr><th>#</th><th>Total Monto</th><th>Fecha de Registro</th><th>Opciones</th></tr>";
      html +="</thead><tbody>";
      for (var i = 0; i < registros.length; i++) {
        html +="<tr><td>"+registros[i]["contador"]+"</td><td class='editable'>";
        //modificando columna editable
        html +="<span>"+registros[i]["Monto"]+"</span>"; 
        html +="<input type='hidden' value=''">; 

        html +="</td><td>"+registros[i]["Fecha"]+"</td>";
        //modificando boton
        html +="<td><a onclick='editarFila(this);' title='Editar' class='btn btn-sm btn-squared margin-inline'><i class='fa fa-pencil' aria-hidden='true'></i></a></td></tr>";
      };
      $("#lista").html(html);
    }
  }
});

}

Then the function:

function editarFila(obj){
    var objSpan=$(obj).parent().parent().children('.editable').children('span');
    $(objSpan).css('display','none')
    $(obj).parent().parent().children('.editable').children('input').attr('type','text').val($(objSpan).text());
}