Foros del Web » Programando para Internet » Jquery »

Mostrar y ocultar filas de una tabla

Estas en el tema de Mostrar y ocultar filas de una tabla en el foro de Jquery en Foros del Web. Hola a todos, Espero puedan darme una mano con este tema, pues he buscado en los post pero no encuentro exactamente lo que necesito: Tengo ...
  #1 (permalink)  
Antiguo 04/06/2019, 00:20
Avatar de laureano59  
Fecha de Ingreso: febrero-2005
Mensajes: 374
Antigüedad: 14 años, 5 meses
Puntos: 0
De acuerdo Mostrar y ocultar filas de una tabla

Hola a todos,
Espero puedan darme una mano con este tema, pues he buscado en los post pero no encuentro exactamente lo que necesito:

Tengo una tabla donde las filas se llenan con un JSON que viene de una consulta sql, y cada fila tiene una columna detalle que al hacer click despliega una fila oculta con el detalle de la fila en cuestión.
El problema surge de la siguiente manera.
La tabla se carga con sus respectivas filas, hasta ahí todo perfecto
El problema es que no sé cómo hacer para que se muestra la fila oculta, si la fila oculta la tengo en el código html FUNCIONA pero como viene de una consulta sql la debo tener en jquery y es ahí dónde no se como mostrar la fila oculta.

Este es el codigo donde está la parte de la tabla con jquery:

Código Javascript:
Ver original
  1. for(var i in perfil.data){
  2. var htmlTags = '<tr>' +
  3.  '<td class="center">' +
  4.    '<div class="action-buttons">' +
  5.  
  6. //Esta es la columna detalle donde llamo la clase show-details-btn para mostrar la fila oculta que está mas abajo
  7.  
  8.      '<a href="#" class="green bigger-140 show-details-btn" title="Show Details">' +
  9.      '<i class="ace-icon fa fa-angle-double-down"></i>' +
  10.        '<span class="sr-only">Details</span>' +
  11.      '</a>' +
  12.   '</div>' +
  13.  '</td>' +
  14. '<td>' +
  15.  perfil.data[i].nombre_mie +
  16. '</td>'+
  17. '<td>'+ perfil.data[i].ministerio +'</td>' +
  18. '<td class="hidden-480">' + perfil.data[i].ciudad + '</td>' +
  19. '<td class="hidden-480">' +
  20. '<span class="label label-sm label-success">' + perfil.data[i].tipo_est +'</span>' +
  21. '</td>' +
  22. '</tr>'+
  23.  
  24. //Aquí inicia el detalle y se oculta con class="detail-row"
  25. //Si llego a poner esta fila en el html me funciona, solo que necesito hacerlo como les expliqué al inicio
  26. //Pido disculpas por si el código no está identado pues no se porque me lo pegó así...                     
  27.                            
  28. '<tr class="detail-row">'+
  29. '<td colspan="8">' +
  30. '<div class="table-detail">' +
  31. '<div class="text-right">' +
  32. '<button type="button" id="buscar" class="btn btn-default btn-round btn-white">' +
  33. '<i class="ace-icon fa fa-floppy-o bigger-160 red"></i>' +
  34. 'Guardar Cambios' +
  35. '</button>' +
  36. '</div>' +
  37. '<div class="space-4"></div>' +
  38. '<div class="row">' +
  39. '<div class="col-xs-12 col-sm-2">' +
  40. '<div class="text-center">' +
  41. '<img height="150" class="thumbnail inline no-margin-bottom" alt="Avatar" src="styles/assets/images/avatars/profile-pic.jpg" />' +
  42. '<br />' +
  43. '<div class="width-100 label label-info label-xlg arrowed-in arrowed-in-right">' +
  44. '<div class="inline position-relative">' +
  45. '<a class="user-title-label" href="#">' +
  46.   '<i class="ace-icon fa fa-circle light-green"></i>' +
  47. '&nbsp;' +
  48. '<span class="white">94535626</span>' +
  49. '</a>' +
  50. '</div>' +
  51. '</div>' +
  52. '</div>' +
  53. '</div>' +
  54. '<div class="col-xs-12 col-sm-5">' +
  55. '<div class="space visible-xs"></div>' +
  56. '<div class="profile-user-info profile-user-info-striped">' +
  57. '<div class="profile-info-row">' +
  58. '<div class="profile-info-name"> Nombre </div>' +
  59. '<span><input type="text" id="nombre" required="" name="nombre" placeholder="Nombre" class="col-xs-10 col-sm-12" /></span>' +
  60. '</div>' +
  61. '<div class="profile-info-row">' +
  62. '<div class="profile-info-name"> Apellido </div>' +
  63. '<span><input type="text" id="apellido" required="" name="apellido" placeholder="Apellido" class="col-xs-10 col-sm-12" /></span>' +
  64. '</div>' +
  65. '<div class="profile-info-row">' +
  66. '<div class="profile-info-name"> Fecha Nac </div>' +
  67. '<span><input class="date-picker col-xs-10 col-sm-12" id="id-date-picker-1" placeholder="Elije una Fecha" required="" type="text" data-date-format="yyyy-mm-dd" /></span>' +
  68. '</div>' +
  69. '<div class="profile-info-row">' +
  70. '<div class="profile-info-name"> Sexo </div>' +
  71. '<span>' +
  72.  '<select class="form-control" id="sexo" name="sexo" required="">' +
  73. '<option value=""></option>' +
  74. '<option value="Masculino">Masculino</option>' +
  75. '<option value="Femenino">Femenino</option>' +
  76. '</select>' +
  77. '</span>' +
  78. '</div>' +
  79. '<div class="profile-info-row">' +
  80. '<div class="profile-info-name"> Móvil </div>' +
  81. '<span><input type="text" id="movil" name="movil" placeholder="Móvil" class="col-xs-10 col-sm-12" /></span>' +
  82. '</div>' +
  83. '</div>'+
  84. '</div>' +
  85. '<div class="col-xs-12 col-sm-5">' +
  86. '<div class="space visible-xs"></div>' +
  87. '<div class="profile-user-info profile-user-info-striped">' +
  88. '<div class="profile-info-row">' +
  89. '<div class="profile-info-name"> E-mail </div>' +
  90. '<span><input type="text" id="email" name="email" placeholder="E-Mail" class="col-xs-10 col-sm-12" /></span>' +
  91. '</div>' +
  92. '<div class="profile-info-row">' +
  93. '<div class="profile-info-name"> Talla </div>' +
  94. '<span><select class="form-control" id="talla" name="talla">' +
  95.  '<option value=""></option>' +
  96.    '<option value="2XS">2XS</option>' +
  97.     '<option value="XS">XS</option>' +
  98.     '<option value="S">S</option>' +
  99.     '<option value="M">M</option>' +
  100.     '<option value="L">L</option>' +
  101.     '<option value="XL">XL</option>' +
  102.     '<option value="2XL">2XL</option>' +
  103.     '<option value="3XL">3XL</option>' +
  104.     '<option value="4XL">4XL</option>' +
  105.    '</select></span>' +
  106. '</div>' +
  107. '<div class="profile-info-row">' +
  108.  '<div class="profile-info-name"> Ministerio </div>' +
  109. '<div class="profile-info-value">' +
  110. '<span>Bio</span>' +
  111. '</div>' +
  112.                                                             '</div>' +
  113.                                                             '<div class="profile-info-row">' +
  114.                                                                 '<div class="profile-info-name"> Sede </div>' +
  115.                                                                 '<div class="profile-info-value">' +
  116.                                                                     '<i class="fa fa-map-marker light-orange bigger-110"></i>' +
  117.                                                                     '<span>Netherlands</span>' +
  118.                                                                 '</div>' +
  119.                                                             '</div>' +
  120.                                                             '<div class="profile-info-row">' +
  121.                                                                 '<div class="profile-info-name"> ¿Es Lider? </div>' +
  122.                                                                 '<span><select class="form-control" id="tipo_miembro" name="tipo_miembro" required="">' +
  123.                                                                  '<option value=""></option>' +
  124.                                                                  '<option value="1">Si</option>' +
  125.                                                                  '<option value="2">No</option>' +
  126.                                                                  '</select></span>' +
  127.                                                                     '</div>' +
  128.                                                                 '</div>' +
  129.                                                             '</div>' +
  130. '</div>' +
  131. '</div>' +
  132. '</div>' +
  133. '</td>' +
  134. '</tr>';
  135.  $('#simple-table tbody').append(htmlTags);
  136. }

Y este es el codigo de la función para mostrar la fila oculta:

Código Javascript:
Ver original
  1. jQuery(function($) {
  2.  
  3.         $('.show-details-btn').on('click', function(e) {
  4.             e.preventDefault();
  5.             $(this).closest('tr').next().toggleClass('open');
  6.             $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
  7.         });
  8.  
  9.     });


Gracias por su valiosa ayuda.
__________________
http://www.weblaum.com
Laureano Melo Medina
:arriba:

Última edición por laureano59; 04/06/2019 a las 00:33



La zona horaria es GMT -6. Ahora son las 04:09.