Comunidad de diseño web y desarrollo en internet online

Eliminar una fila con Jquery

Citar            
MensajeEscrito el 23 Feb 2014 07:22 am
Hola, por favor tengo este código con el que edito unas filas y me gustaría también poder eliminarlas. Me podeis ayudar ?


Código Javascript :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function() 
    {
        /* OBTENEMOS TABLA */
        $.ajax({
            type: "GET",
            url: "editinplace.php?tabla=1"
        })
        .done(function(json) {
            json = $.parseJSON(json)
            for(var i=0;i<json.length;i++)
            {
                $('.editinplace').append(
                    "<tr><td class='id'>"+json[i].id+"</td><td class='editable' data-campo='nombre'><span>"+json[i].nombre+"</span></td><td class='editable' data-campo='apellidos'><span>"+json[i].apellidos+"</span></td><td class='editable' data-campo='email'><span>"+json[i].email+"</span></td><td class='editable' data-campo='telefono'><span>"+json[i].telefono+"</span></td></tr>");
            }
        });
        
        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='loading.gif'>");
            e.preventDefault();
            nuevovalor=$(this).closest("td").find("input").val();
            if(nuevovalor.trim()!="")
            {
                $.ajax({
                    type: "POST",
                    url: "editinplace.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>");
        });
    });
    
    </script>



He hecho esto:

Código Javascript :

$(document).on("click",".borrar",function(e){
     
        id=$(this).closest("tr").find(".id").text();
       
 
        $.ajax({
            type: "POST",
            url: "includes/delete.php",
            data: { id:id }
            })
                    .done(function( msg ) {
                        
                    $(".mensaje").html(msg);
                    td.html("<span>"+valor+"</span>");
                    $("td:not(.id)").addClass("editable");
                     $(this).closest('tr').remove();
                    
                });
         
         });



y me elimina la fila de la base de datos pero quiero que desaparezca de la lista. Creo que es con:

Código Javascript :

$(this).closest('tr').remove();



Gracias y un saludo

Por madri

8 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Feb 2014 08:40 pm
Lo he solucionado, me podeis decir por favor si esta bien ?

Código Javascript :

$(document).on("click",".borrar",function(e){

                    id = $(this).parents("tr").find("td").eq(0).html();
                    respuesta = confirm("¿Desea eliminarlo?");
                    if (respuesta){
                        $(this).parents("tr").fadeOut("normal", function(){
                            $(this).remove();
                            alert("¡Eliminado!")
                          
               $.ajax({
               type: "POST",
               url: "includes/delete.php",
               data: {id:id},
               beforeSend:function(objeto){ 
                    $('#carga').css({display:'block'});
                    },
                    complete:function(){
                $('#carga').css('display','none');
                },
               })
            .done(function( msg ) {
            $(".mensaje").html(msg);
            td.html("<span>"+valor+"</span>");
            $("td:not(.id)").addClass("editable");
            setTimeout(function() {$('.ok,.ko').fadeOut('fast');}, 3000);   
               
            });
               
                     
                        })
                    }
                });
 

Por madri

8 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.