Alternar visibilidad de filas de tabla adicionales

Question

Tengo una tabla para la que quiero mostrar solo la primera fila de forma predeterminada, pero visualizo un número de filas X adicional si un usuario hace clic en un enlace "mostrar más" (y oculta inversamente las filas X si el usuario luego hace clic en "mostrar menos").

Para ejemplificar, quiero la vista por defecto cuando se carga la página que se va así:

Top Scores 
==================================== 
| 1 | show this row always!  | 
==================================== 
-show more- 

Entonces, si un usuario hace clic en "MOSTRAR MÁS", la mesa debe ampliar con filas adicionales y tener este aspecto :

Top Scores 
==================================== 
| 1 | show this row always!  | 
| 2 | newly displayed row  | 
| 3 | newly displayed row  | 
| 4 | newly displayed row  | 
| 5 | newly displayed row  | 
==================================== 
-show less- 

Entonces, obviamente, si un usuario hace clic en "mostrar menos" la mesa vuelve a los valores predeterminados (mostrando sólo la primera fila de nuevo).

Estoy familiarizado con la función .toggle() en jQuery, pero no estoy seguro si se puede aplicar aquí o si tengo que hacer más trabajo manual.

Gracias!

Answer 1

No hay clases adicionales, sin cabeceras necesaria - http://jsfiddle.net/wgSZs/

$('table').find('tr:gt(0)').hide(); 

$("button").on("click", function() { 
    $('table').find('tr:gt(0)').toggle(); 
}); 

ACTUALIZACIÓN

Podría ser mejor para ocultar las filas adicionales a través de CSS en lugar de jQuery para evite el cambio de elementos mientras se descarga y aplica el JS. Pero todavía no es necesario agregar clases; es una buena idea mantener el marcado lo más limpio posible.Usted puede hacer esto:

table tr { display: none } 
table tr:first-child { display: block } 

Aquí está el ejemplo de trabajo - http://jsfiddle.net/wgSZs/1/

Answer 2

si marca las filas agregadas con una clase como .collapsible, entonces puede alternar fácilmente su visibilidad en javascript.

$('.collapsible').show() o $('.collapsible').hide() o $('.collapsible').toggle()

Answer 3

Usted puede hacer esto al ocultar de una mesa & visualizando sólo

$('thead').click(function(){ 

    $('tbody').show(); 
}) 

Answer 4

OK, así que después de escribir toda la cuestión a cabo, Stackoverflow decidió mostrarme un relevant related question. :)

Parece que puedo usar el selector gt a través de jQuery para alternar solo filas mayores que un número de fila especificado, lo que debería ser perfecto para lo que quiero lograr.

Perdón por la pregunta redundante (suponiendo que esto funcione para mí, aún no lo he probado)!

Answer 5

Toggle funcionaría a la perfección:.

$ ('# show-link') alternar (function() {

} , function() {

});

Answer 6

http://jsfiddle.net/iambriansreed/uwfk8/

var initial_rows_to_show = 2; 

(function(_rows){  
    _rows.hide(); 
    $('a.more').toggle(function(){ 
     _rows.show(); $(this).text('less'); 
    },function(){  
     _rows.hide(); $(this).text('more'); 
    }); 
})($('tr:gt(' + (initial_rows_to_show - 1) + ')')); 

Answer 7

Aquí tienes ... ejemplo de trabajo en jsFiddle:

http://jsfiddle.net/ndFgF/8/

<table width="500" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <th width="25%" id="expand" scope="col">Show More</th> 
    <th width="25%" scope="col">&nbsp;</th> 
    <th width="25%" scope="col">&nbsp;</th> 
    <th width="25%" id="collapse" scope="col">Show Less</th> 
    </tr> 
    <tr data-rows="togglerow" style="display:none"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr data-rows="togglerow" style="display:none"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr data-rows="togglerow" style="display:none"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr data-rows="togglerow" style="display:none"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

Tenga en cuenta que los datos atributo en las filas de la tabla se hace referencia en el jQuery a continuación:

<script> 
$("#collapse").click(function() { 
     $("[data-rows='togglerow']").hide(400); 
    }) 
$("#expand").click(function() { 
     $("[data-rows='togglerow']").show(400); 
    }) 
</script> 

Utilicé el atributo 'datos' en lugar del nombre de clase porque me gusta mantenerlos separados ... puede usar un nombre de clase si lo desea, pero no use ID porque no es una forma adecuada de hazlo (se supone que los ID son únicos, no repetidos).