Как скрыть/показать строки таблицы с помощью jQuery?

Question

У меня есть веб-приложение Zend Framework (PHP), в котором есть таблица с большим количеством строк.

• 99.9% времени пользователь будет принимать меры в первом или втором строках.
• 00.1% времени пользователь должен будет вернуться назад и принять меры в другой строке.

Поэтому мне действительно нужно отображать первые несколько строк на загрузке страницы и оставлять остальное доступным для истории.

Я как-то хотел бы сократить таблицу. Я думаю, используя jQuery, возможно, что-то, где отображаются первые 5 строк (остальные скрыты), а в нижней части таблицы есть ссылка для отображения еще 5 строк.

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

Что вы думаете? Как я могу достичь этого с помощью jQuery?

Answer 1

Это, как я хотел бы сделать это (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

Несомненно, вы можете сделать это с помощью jQuery. Я бы, наверное, сделать это таким образом:

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

загрузить их скрытый с помощью CSS:

#old { display: none; } 

и:

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

В JQuery скрыть/показать эффект может быть немного странно со столом компонентов. Если это так изменить CSS к этому:

#old.hidden { display: none; } 

и:

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

Конечно вы не получите хороший эффект этот путь.

Answer 3

Я знаю, что это старый нить, но только в том случае, если кто-то ищет, я написал этот сценарий:

$(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(); 
    } 
}); 

});