ampliación o nuevo enfoque - añadir tr entre 2 trs

Legolas_Bilbao · #1 (**permalink**) 07/11/2010, 06:19

En su día pregunte lo siguiente

http://www.forosdelweb.com/f127/jque...os-trs-772047/

Me funciona de cine pero ahora quiero hacer una nueva consulta ajax

1º paso

tr 1
td 1
tr 2
td 2
..

tr n
td n

al pulsar en la imagen de td 1, td2, ... tdn,

La tabla quedaría
tr 1
td 1
nueva tr.

La nueva tr, contiene una tabla y mi idea es que al pulsar en una imagen de una nueva td, me traiga de nuevo datos pero he ido haciendo pruebas y no lo consigo

Código:




Código Javascript:
Ver original$('td [name^="liga"]').toggle( 
              function (){
                var img = $(this);
                var id = img.attr('id');
                              petición ajax
                },
                function () {
                $(this).attr("src","./img/lupa.gif");
                $(this).parents('tr').next('tr').remove();
                
              }
            );
            
        });
 
$( function () {
           
            $('td [name^="tarjeta"]').toggle( 
              function (){
              alert(0);
                var img = $(this);
                var id = img.attr('id');
                $(this).attr("src","./img/cerrar.jpeg");
                Petición Ajax
                },
                function () {
                $(this).attr("src","./img/lupa.jpeg");
                $(this).parents('tr').next('tr').remove();
              }
            );

La segunda funcion, en ningun momento entra :S

, ¿alguna sugerencia? O he enfocado mal la pregunta.

un saludo y muchas gracias

Dany_s · #2 (**permalink**) 07/11/2010, 12:04

no entendí
hace un html con tu tabla y otra de como queres que quede al hacer click

Legolas_Bilbao · #3 (**permalink**) 07/11/2010, 12:46

Cita:

Iniciado por Dany_s

no entendí
hace un html con tu tabla y otra de como queres que quede al hacer click

Buenas Dany,

A ver si me explico correctamente.

Mi pagína me muestra una tabla de la siguiente manera

Código HTML:

Ver original<table>
 <tr>
 <td></td>
</tr>
 
 <tr>
 <td></td>
</tr>
 
 <tr>
 <td></td>
</tr>
</table>

Pulsando en una imagen existente en cualquiera de las TD, a través de ajax obtengo una serie de información que se introduce en una nueva tr siguiente a la que ha hecho la peticion

tal que asi

Código HTML:

Ver original<table>
 <tr>
 <td></td>
</tr>
[B][I]<tr class='nueva tr'>
  <td><table>Contenido de la tabla</table></td>
</tr>[/I][/B]
</table>

Lo que quiero es que en la nueva tr, las diferentes td de la nueva tabla, tenga un evento jquery que cuando lo ejecute me traiga nuevamente datos con una petición ajax, actualmente soy incapaz de ejecutar el nuevo comando y no se como solventarlo.

No se si he sido suficientemente claro

chicohot20 · #4 (**permalink**) 07/11/2010, 20:43

A ver si entiendo: de las nuevas TR no puedes manejar eventos? si es así JQuery live te puede ayudar

Legolas_Bilbao · #5 (**permalink**) 08/11/2010, 01:32

Cita:

Iniciado por chicohot20

A ver si entiendo: de las nuevas TR no puedes manejar eventos? si es así JQuery live te puede ayudar

Eso es, gracias

Dany_s · #6 (**permalink**) 08/11/2010, 05:40

claro con evento live

proba traer esto:

Código HTML:

Ver original<tr><td><div class="nuevo"></div></td></tr>

y proba

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
 
        $( function(){
            $('.existe').click( function (){
                var tr = $(this).closest('tr');
                $.ajax({
                    url:'laURL',
                    success: function(data){
                        tr.after(data);
                    }
                })
            });
            $('.nuevo').live('click', function(){
                alert("click en nuevo");
            });
        });
 
        </script>
        <style>
            .existe{height:20px; width:50px; background:blue}
            .nuevo{height:20px; width:50px; background:red}
        </style>
    <body>
 
    <table>
        <tr><td><div class="existe"></div></td></tr>
        <tr><td><div class="existe"></div></td></tr>
    </table>
 
    </body>
</html>

Legolas_Bilbao · #7 (**permalink**) 08/11/2010, 10:13

Perfecto ;) ,gracias era un problema con la versión de jquery que tenía una prehistorica

Legolas_Bilbao · #8 (**permalink**) 08/11/2010, 13:55

Ya he conseguido que funcione una parte ahora solo me falta eliminar la fila pero no me tira

Código Javascript:

Ver original$('img').live('click', function(){
                      
                var img = $(this);
                var id = img.attr('id');
                $(this).attr("src","./img/cerrar.jpeg");
                $.ajax({
                url: '',
                data: parametros,
                type: 'post',
                success: function(data){
                    fila = $(data);
                    img.parents('tr').after(fila);
                }
                })
                
            });

¿cómo enchufo lo siguiente? Si ya he pulsado en esa misma imagen quiero eliminar esa tabla

Código Javascript:

Ver originalfunction () {
                $(this).attr("src","./img/lupa.jpeg");
                $(this).parents('tr').next('tr').remove();
              }