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!