Come nascondere/mostrare le righe della tabella usando jQuery?

Question

Ho un'applicazione Web Zend Framework (PHP) che ha una tabella con molte righe.

• 99,9% del tempo, l'utente agirà sulla prima o sulla seconda fila.
• 00.1% del tempo, l'utente dovrà tornare indietro e agire su una riga diversa.

Quindi ho solo bisogno di visualizzare solo le prime righe sul caricamento della pagina e mantenere il resto disponibile per motivi storici.

Vorrei accorciare il tavolo in qualche modo. Sto pensando, usando jQuery, magari fare qualcosa dove sono visualizzate le prime 5 righe (il resto sono nascoste), e in fondo alla tabella c'è un link per visualizzare altre 5 righe.

alt text http://img64.imageshack.us/img64/2479/5rowtable.png

Cosa ne pensi? Come potrei ottenere questo con jQuery?

Answer 1

Questo è come vorrei fare questo (demo here):

Script

var numShown = 5; // Initial rows shown & index 
var numMore = 5; // Increment 

var $table = $('table').find('tbody'); // tbody containing all the rows 
var numRows = $table.find('tr').length; // Total # rows 

$(function() { 
    // Hide rows and add clickable div 
    $table.find('tr:gt(' + (numShown - 1) + ')').hide().end() 
     .after('<tbody id="more"><tr><td colspan="' + 
       $table.find('tr:first td').length + '"><div>Show <span>' + 
       numMore + '</span> More</div</tbody></td></tr>'); 

    $('#more').click(function() { 
     numShown = numShown + numMore; 
     // no more "show more" if done 
     if (numShown >= numRows) { 
      $('#more').remove(); 
     } 
     // change rows remaining if less than increment 
     if (numRows - numShown < numMore) { 
      $('#more span').html(numRows - numShown); 
     } 
     $table.find('tr:lt(' + numShown + ')').show(); 
    }); 

}); 

Answer 2

Certo, è possibile farlo con jQuery. probabilmente lo farei in questo modo:

<table> 
<tbody id="new"> 
    <tr>...</tr> <!-- x5 --> 
    <tr><td><a href="#" id="toggle">Show Old</a></td></tr> 
</tbody> 
<tbody id="old"> 
    ... 
</tbody> 
</table> 

caricarli nascosto con i CSS:

#old { display: none; } 

e:

$(function() { 
    $("#toggle").click(function() { 
    if ($("#old").is(":hidden")) { 
     $(this).text("Hide Old"); 
    } else { 
     $(this).text("Show Old"); 
    } 
    $("#old").slideToggle(); 
    return false; 
    }); 
}); 

jQuery nascondere/mostrare effetti possono essere un po 'strano con tavolo componenti comunque. Se è così cambiare il CSS a questo:

#old.hidden { display: none; } 

e:

$(function() { 
    $("toggle").click(function() { 
    if ($("#old").hasClass("hidden")) { 
     $(this).text("Hide Old"); 
    } else { 
     $(this).text("Show Old"); 
    } 
    $(this).toggleClass("hidden"); 
    return false; 
    }); 
}); 

Naturalmente non si ottiene gli effetti piacevoli in questo modo.

Answer 3

So che questo è un vecchio thread, ma solo nel caso in cui qualcun altro è alla ricerca Ho scritto questo script:

$(function() { 
/* initial variables */ 
var numRows = $('#ticketLinesTable').find('tr').length; 
var SHOWN = 5; 
var MORE = 20; 

/* get how many more can be shown */ 
var getNumMore = function(ns) { 
    var more = MORE; 
    var leftOver = numRows - ns; 
    if((leftOver) < more) { 
     more = leftOver; 
    } 
    return more; 
} 
/* how many are shown */ 
var getInitialNumShown = function() { 
    var shown = SHOWN; 
    if(numRows < shown) { 
     shown = numRows; 
    } 
    return shown; 
} 
/* set how many are initially shown */ 
var numShown = getInitialNumShown(); 

/* set the numMore if less than 20 */ 
var numMore = getNumMore(numShown); 

/* set more html */ 
if(numMore > 0) { 
    var more_html = '<p><button id="more">Show <span style="font-weight: bold;">' + numMore + '</span> More...</button></p>'; 
    $('#ticketLinesTable').find('tr:gt(' + (numShown - 1) + ')').hide().end().after(more_html); 
} 
$('#more').click(function(){ 
    /* determine how much more we should update */ 
    numMore = getNumMore(numShown); 
    /* update num shown */ 
    numShown = numShown + numMore; 
    $('#ticketLinesTable').find('tr:lt('+numShown+')').show(); 

    /* determine if to show more and how much left over */ 
    numMore = getNumMore(numShown); 
    if(numMore > 0) { 
     $('#more span').html(numMore); 
    } 
    else { 
     $('#more').remove(); 
    } 
}); 

});