Estoy comenzando a trabajar con JQUERY en mi proyecto en el cual genero una tabla desde una función con AJAX, por cada registro ademas de los datos, genero una columna con un botón para poder editar, el problema es que necesito que al pulsar el boton de edicion; sobre la misma columna del valor (Total Monto), aparezca un input con el valor de este y pueda editarlo desde su mismo sitio. adjunto una imagen de lo que genera mi tabla .
necesito que al dar click a editar, aparezca un input con el monto en este caso 30.00 y pueda editarlo desde ahí. esta es mi funcion:
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);
}
}
});
}