Foros del Web » Programando para Internet » Jquery »

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

Estas en el tema de jquery + jquery-ui - mostrar contenido entre dos tr en el foro de Jquery en Foros del Web. Hola a [email protected]! espero que puedan ayudarme en el siguiente problema expuesto. tengo la siguiente tabla (a modo ejemplo, es algo más extensa y con ...
  #1 (permalink)  
Antiguo 21/05/2014, 10:07
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 10 años, 9 meses
Puntos: 17
Pregunta jquery + jquery-ui - mostrar contenido entre dos tr

Hola a [email protected]!
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:
Ver original
  1. <table id="table-sorter" class="table_data">
  2.     <thead>
  3.         <th>Semana</th>
  4.         <th>Kg</th>
  5.         <th>xxx</th>
  6.         <th colspan="3">&nbsp;</th>        
  7.     </thead>
  8.     <tbody>
  9.         <tr id="tr_1">
  10.             <td>1</td><td>150.000</td><td>xxx</td>
  11.             <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>            
  12.         </tr>    
  13.         <tr id="tr_2">
  14.             <td>2</td><td>50.000</td><td>asfdf</td>
  15.             <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>            
  16.         </tr>
  17.     </tbody>
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:
Ver original
  1. $(document).ready(function () {
  2.     $(".ui-icon.ui-icon-triangle-1-s").toggle(
  3.         function () {
  4.             $.ajax({
  5.                 url: 'contenido.php',
  6.                 data: 'ide=1_por_probar' ,
  7.                 type: 'post',
  8.                 success: function(data){
  9.                     fila = $('<tr class="nuevaTr"><td colspan="4">' + data + '</td></tr>');
  10.                     $(this).parents('tr').after(fila);
  11.                 }
  12.             })
  13.         },
  14.         function () {
  15.             $(this).parents('tr').next('tr').remove();
  16.         }
  17.     );
  18. });

saludos y muchas gracias de antemano!
  #2 (permalink)  
Antiguo 21/05/2014, 13:15
Avatar de Aeon1  
Fecha de Ingreso: enero-2012
Mensajes: 57
Antigüedad: 9 años, 4 meses
Puntos: 3
Respuesta: jquery + jquery-ui - mostrar contenido entre dos tr

lo que pretendes es insertar otra linea a tu tabla debajo de la linea clickeada y al siguiente click quitarla?
  #3 (permalink)  
Antiguo 22/05/2014, 01:03
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 10 años, 9 meses
Puntos: 17
Respuesta: jquery + jquery-ui - mostrar contenido entre dos tr

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

Última edición por Bugger; 22/05/2014 a las 01:09
  #4 (permalink)  
Antiguo 26/05/2014, 04:59
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 10 años, 9 meses
Puntos: 17
Respuesta: jquery + jquery-ui - mostrar contenido entre dos tr

Hola a [email protected] 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:
Ver original
  1. <script>
  2. $("table tbody span.ui-icon-triangle-1-s").click(function(){      
  3.         var row_tr = $(this).parent().parent().parent().attr("id");
  4.         var detail = $("#detail_" + row_tr);
  5.         if ( $(this).hasClass("ui-icon-triangle-1-n") ) {          
  6.             detail.remove();
  7.         }else{
  8.             $(this).parent().parent().parent().after("<tr id='detail_" + row_tr + "'><td colspan='4'>Detail Row:"+row_tr+"</td></tr>");                
  9.         }
  10.  $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');            
  11.     });
  12. </script>
Código HTML:
Ver original
  1. <table id="table-sorter" class="table_data">
  2.     <thead>
  3.         <th>Semana</th>
  4.         <th>Kg</th>
  5.         <th>xxx</th>
  6.         <th colspan="3">&nbsp;</th>        
  7.     </thead>
  8.     <tbody>
  9.         <tr id="tr_1">
  10.             <td>1</td><td>150.000</td><td>xxx</td>
  11.             <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>            
  12.         </tr>    
  13.         <tr id="tr_2">
  14.             <td>2</td><td>50.000</td><td>asfdf</td>
  15.             <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>            
  16.         </tr>
  17.     </tbody>

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:
Ver original
  1. <script>
  2. $(document).ready(function () {
  3.    
  4.     $("table tbody span.ui-icon-triangle-1-s").click(function(){                  
  5.         var row_tr = $(this).parent().parent().parent().attr("id");
  6.         var detail = $("#detail_" + row_tr);
  7.         if ( $(this).hasClass("ui-icon-triangle-1-n") ) {          
  8.             detail.remove();
  9.         }else{
  10.             $.post('consultes/plantilla/list.php',function(data){
  11.                 $(this).parent().parent().parent().after("<tr id='detail_" + row_tr + "'><td colspan='4'>Detail Row:"+data+"</td></tr>");                
  12.            },'html')
  13.         }
  14.         $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');  
  15.     });
  16. });
  17. </script>

Gracias de antemano

Última edición por Bugger; 27/05/2014 a las 01:16
  #5 (permalink)  
Antiguo 27/05/2014, 03:28
 
Fecha de Ingreso: septiembre-2010
Ubicación: /home/
Mensajes: 103
Antigüedad: 10 años, 9 meses
Puntos: 17
Respuesta: jquery + jquery-ui - mostrar contenido entre dos tr

Hola,

ya está solucionado - dejo el código a continuación por si ha alguien le interesa.
Código Javascript:
Ver original
  1. <script>
  2. $(document).ready(function () {
  3.    
  4.     $("table tbody span.ui-icon-triangle-1-s").click(function(){                  
  5.         var row_tr = $(this).parent().parent().parent().attr("id");
  6.         var detail = $("#detail_" + row_tr);
  7.         if ( $(this).hasClass("ui-icon-triangle-1-n") ) {          
  8.             detail.remove();
  9.         }else{
  10.             var tr = $(this).parent().parent().parent();
  11.              $.post('url.php', function(html) {
  12.                tr.after("<tr id='detail_" + row_tr + "'><td colspan='4'>"+ html +"</td></tr>");
  13.             });            
  14.         }
  15.         $(this).toggleClass('ui-icon ui-icon-triangle-1-n ui-icon ui-icon-triangle-1-s');  
  16.     });
  17. });
  18. </script>
Código HTML:
Ver original
  1. <div class="box_results"><img src="lib/images/icons/png/excel.png"/></div>
  2. <table id="table-sorter" class="table_data">
  3.     <thead>
  4.         <th>Semana</th>
  5.         <th>Kg</th>
  6.         <th>xxx</th>
  7.         <th colspan="3">&nbsp;</th>        
  8.     </thead>
  9.     <tbody>
  10.         <tr id="tr_1">
  11.             <td>1</td><td>150.000</td><td>xxx</td>
  12.             <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>            
  13.         </tr>    
  14.         <tr id="tr_2">
  15.             <td>2</td><td>50.000</td><td>asfdf</td>
  16.             <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>            
  17.         </tr>
  18.     </tbody>

saludos

Etiquetas: contenido, jquery-ui
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:43.