[SOLUCIONADO] jquery + jquery-ui - mostrar contenido entre dos tr

[Bugger]

Hola a tod@s!
espero que puedan ayudarme en el siguiente problema expuesto.

tengo la siguiente tabla (a modo ejemplo, es algo más extensa y con resultados de una consulta sql realizada en php)

Código HTML:

<table id="table-sorter" class="table_data">
    <thead>
        <th>Semana</th>
        <th>Kg</th>
        <th>xxx</th>
        <th colspan="3">&nbsp;</th>        
    </thead>
    <tbody>
        <tr id="tr_1">
            <td>1</td><td>150.000</td><td>xxx</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>    
        <tr id="tr_2">
            <td>2</td><td>50.000</td><td>asfdf</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>
    </tbody>
</table>
 

lo que me gustaria realizar es que al clicar el span que contiene un icono me añada un TR justamente debajo del TR que contiene el SPAN, y lo que mostrariaen el siguiente TR insertado es el resultado de otro archivo.
algo parecido a lo siguiente pero no logro que funcione...

Código Javascript:

$(document).ready(function () {
    $(".ui-icon.ui-icon-triangle-1-s").toggle( 
        function () { 
            $.ajax({ 
                url: 'contenido.php', 
                data: 'ide=1_por_probar' , 
                type: 'post', 
                success: function(data){ 
                    fila = $('<tr class="nuevaTr"><td colspan="4">' + data + '</td></tr>');
                    $(this).parents('tr').after(fila);
                } 
            }) 
        }, 
        function () { 
            $(this).parents('tr').next('tr').remove(); 
        } 
    ); 
});
 

saludos y muchas gracias de antemano!

[Aeon1]

lo que pretendes es insertar otra linea a tu tabla debajo de la linea clickeada y al siguiente click quitarla?

[Bugger]

Hola Aeon1, es eso mismo.

lo que intento es que al clicar el span inserte un tr justamente debajo de la misma fila que contendrá contenido de otra página.
es una tabla que contiene X datos genéricos, y al clicar el botón mostrará detalles de esa fila en concreto, justamente debajo, como los datos están en una tabla lo que quiero es insertar un tr y mostrar esos datos, y al volver a clicar la imagen vuelva a a quitar esa fila insertada.
puestos a pedir, para cambiar la imagen del span al desplegar? como seria?

saludos y gracias

[Bugger]

Hola a tod@s de nuevo...

la solución que me ha salido seria la siguiente:, pero no consigo cargar el contenido de otra página en la tabla

Código Javascript:

<script>
$("table tbody span.ui-icon-triangle-1-s").click(function(){       
        var row_tr = $(this).parent().parent().parent().attr("id");
        var detail = $("#detail_" + row_tr);
        if ( $(this).hasClass("ui-icon-triangle-1-n") ) {           
            detail.remove();
        }else{
            $(this).parent().parent().parent().after("<tr id='detail_" + row_tr + "'><td colspan='4'>Detail Row:"+row_tr+"</td></tr>");                
        }
 $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');            
    });
</script>
 

Código HTML:

<table id="table-sorter" class="table_data">
    <thead>
        <th>Semana</th>
        <th>Kg</th>
        <th>xxx</th>
        <th colspan="3">&nbsp;</th>        
    </thead>
    <tbody>
        <tr id="tr_1">
            <td>1</td><td>150.000</td><td>xxx</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>    
        <tr id="tr_2">
            <td>2</td><td>50.000</td><td>asfdf</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>
    </tbody>
</table>
 

aquí dejo el código llamando a otra página que no me funciona y no se el motivo!
cualquier ayuda será de agradecer.

Código Javascript:

<script>
$(document).ready(function () {
    
    $("table tbody span.ui-icon-triangle-1-s").click(function(){                  
        var row_tr = $(this).parent().parent().parent().attr("id");
        var detail = $("#detail_" + row_tr);
        if ( $(this).hasClass("ui-icon-triangle-1-n") ) {           
            detail.remove();
        }else{
            $.post('consultes/plantilla/list.php',function(data){
                $(this).parent().parent().parent().after("<tr id='detail_" + row_tr + "'><td colspan='4'>Detail Row:"+data+"</td></tr>");                
           },'html')
        }
        $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');  
    }); 
});
</script>
 

Gracias de antemano

[Bugger]

Hola,

ya está solucionado - dejo el código a continuación por si ha alguien le interesa.

Código Javascript:

<script>
$(document).ready(function () {
    
    $("table tbody span.ui-icon-triangle-1-s").click(function(){                  
        var row_tr = $(this).parent().parent().parent().attr("id");
        var detail = $("#detail_" + row_tr);
        if ( $(this).hasClass("ui-icon-triangle-1-n") ) {           
            detail.remove();
        }else{
            var tr = $(this).parent().parent().parent();
             $.post('url.php', function(html) {
               tr.after("<tr id='detail_" + row_tr + "'><td colspan='4'>"+ html +"</td></tr>");
            });            
        }
        $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');  
    }); 
});
</script>
 

Código HTML:

<div class="box_results"><img src="lib/images/icons/png/excel.png"/></div>
<table id="table-sorter" class="table_data">
    <thead>
        <th>Semana</th>
        <th>Kg</th>
        <th>xxx</th>
        <th colspan="3">&nbsp;</th>        
    </thead>
    <tbody>
        <tr id="tr_1">
            <td>1</td><td>150.000</td><td>xxx</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>    
        <tr id="tr_2">
            <td>2</td><td>50.000</td><td>asfdf</td>
            <td class="icon-td"><div id="icons" class="box_icon ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-s"></span></div></td>            
        </tr>
    </tbody>
</table>
 

saludos