Código HTML:
$(document).ready(function()
{
/* OBTENEMOS TABLA */
$.ajax({
type: "GET",
url: "editartarea.php?tabla=1"
})
.done(function(json) {
json = $.parseJSON(json)
for(var i=0;i<json.length;i++)
{
$('.editartarea').append(
"<tr><td><input type='checkbox' name='check[]' id='enviar' value='id'/></td><td class='id'>"+json[i].id+"</td><td class='editable' data-campo='nombreTarea'><span>"+json[i].nombreTarea+"</span></td><td class='editable' data-campo='fechaCreacion'><span>"+json[i].fechaCreacion+"</span></td><td class='editable' data-campo='fechaResolucion'><span>"+json[i].fechaResolucion+"</span></td><td class='editable' data-campo='fechaTentativa'><span>"+json[i].fechaTentativa+"</span></td><td class='editable' data-campo='notas'><span>"+json[i].notas+"</span></td>");
}
});
var td,campo,valor,id;
$(document).on("click","td.editable span",function(e)
{
e.preventDefault();
$("td:not(.id)").removeClass("editable");
td=$(this).closest("td");
campo=$(this).closest("td").data("campo");
valor=$(this).text();
id=$(this).closest("tr").find(".id").text();
td.text("").html("<input type='text' name='"+campo+"' value='"+valor+"'><a class='enlace guardar' href='#'>Guardar</a><a class='enlace cancelar' href='#'>Cancelar</a>");
});
$(document).on("click",".cancelar",function(e)
{
e.preventDefault();
td.html("<span>"+valor+"</span>");
$("td:not(.id)").addClass("editable");
});
$(document).on("click",".guardar",function(e)
{
$(".mensaje").html("<img src='../images/loading.gif'>");
e.preventDefault();
nuevovalor=$(this).closest("td").find("input").val();
if(nuevovalor.trim()!="")
{
$.ajax({
type: "POST",
url: "editartarea.php",
data: { campo: campo, valor: nuevovalor, id:id }
})
.done(function( msg ) {
$(".mensaje").html(msg);
td.html("<span>"+nuevovalor+"</span>");
$("td:not(.id)").addClass("editable");
setTimeout(function() {$('.ok,.ko').fadeOut('fast');}, 3000);
});
}
else $(".mensaje").html("<p class='ko'>Debes ingresar un valor</p>");
});
});
