Làm cách nào để ẩn/hiện các hàng trong bảng bằng jQuery?

Question

Tôi có một ứng dụng web Zend Framework (PHP) có một bảng có nhiều hàng.

• 99,9% thời gian, người dùng sẽ thực hiện hành động trên hàng đầu tiên hoặc hàng thứ hai.
• 00.1% thời gian, người dùng sẽ cần phải quay lại và thực hiện hành động trên một hàng khác.

Vì vậy, tôi chỉ thực sự cần hiển thị một vài hàng đầu tiên khi tải trang và giữ phần còn lại có sẵn vì lợi ích của lịch sử.

Tôi muốn rút ngắn bảng bằng cách nào đó. Tôi đang suy nghĩ, bằng cách sử dụng jQuery, có thể làm một cái gì đó mà 5 hàng đầu tiên được hiển thị (phần còn lại được ẩn), và ở dưới cùng của bảng, có một liên kết để hiển thị thêm 5 hàng.

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

Bạn nghĩ sao? Làm thế nào tôi có thể đạt được điều này với jQuery?

Answer 1

Đây là cách tôi sẽ làm điều này (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

Chắc chắn bạn có thể làm điều này với jQuery. Tôi có lẽ sẽ làm điều đó theo cách này:

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

Tải họ ẩn với CSS:

#old { display: none; } 

và:

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

Các jQuery hiệu ứng ẩn/hiển thị có thể là một chút lạ với bảng thành phần tuy nhiên. Nếu vậy thay đổi CSS như sau:

#old.hidden { display: none; } 

và:

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

Tất nhiên bạn không nhận được hiệu ứng đẹp mắt theo cách này.

Answer 3

Tôi biết đây là một chủ đề cũ, nhưng chỉ trong trường hợp bất cứ ai khác đang tìm kiếm tôi đã viết kịch bản này:

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

});