Attiva/disattiva la visibilità delle righe di tabella aggiuntive

Question

Ho una tabella per la quale voglio visualizzare solo la prima riga per impostazione predefinita, ma visualizzare un numero X aggiuntivo di righe se un utente fa clic su un link "mostra altro" (e nasconde le righe X in modo inverso se l'utente fa clic su "mostra meno").

per esemplificare, voglio che la visualizzazione predefinita al caricamento della pagina per essere in questo modo:

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

Quindi, se un utente fa clic "Mostra altro", la tabella dovrebbe espandersi con righe aggiuntive e simile a questa :

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- 

Poi ovviamente se un utente clicca "show less" il tavolo ritorna di default (mostrando di nuovo solo la prima riga).

Ho familiarità con la funzione .toggle() in jQuery, ma non sono sicuro se può essere applicata qui o se devo fare più lavoro manuale.

Grazie!

Answer 1

Non ci sono lezioni aggiuntivi, senza intestazioni richieste - http://jsfiddle.net/wgSZs/

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

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

UPDATE

Sarebbe meglio per nascondere le righe aggiuntive tramite CSS invece di jQuery per evitare lo spostamento degli elementi mentre il JS viene scaricato e applicato. Ma non è ancora necessario aggiungere classi: è una buona idea mantenere il markup il più pulito possibile.È possibile farlo:

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

Ecco l'esempio di lavoro - http://jsfiddle.net/wgSZs/1/

Answer 2

se si contrassegnano le righe aggiunte con una classe come .collapsible, quindi è possibile attivare facilmente la loro visibilità in javascript.

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

Answer 3

Si può fare questo nascondendo di un tavolo & visualizzando solo

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

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

Answer 4

OK, quindi dopo aver digitato l'intera questione fuori, StackOverflow ha deciso di mostrarmi un relevant related question. :)

Sembra che io possa utilizzare il selettore gt tramite jQuery per attivare solo le righe superiori a un numero di riga specificato, che dovrebbe essere perfetto per ciò che voglio ottenere.

Ci scusiamo per la domanda ridondante (supponendo che questo funzioni per me, non l'ho ancora provato)!

Answer 5

Toggle avrebbe funzionato perfettamente:.

$ ('#-link show') alternare (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

Qui si va ... esempio di lavoro in 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> 

Si noti che i dati l'attributo nelle righe della tabella sono referenziati nella jQuery di seguito:

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

Ho usato l'attributo "data" al posto del nome della classe perché mi piace tenerle separate ... puoi usare un nome di classe se lo desideri, ma non usare ID perché non è un modo corretto per fallo (gli ID dovrebbero essere unici, non ripetuti).