在網(wǎng)頁設(shè)計中，表格是一種非常常見的元素，它使得我們能夠很好地呈現(xiàn)數(shù)據(jù)和信息。然而，在表格內(nèi)容過多的情況下，頁面會變得非常混亂和不易閱讀。為了解決這個問題，我們可以使用jQuery來實現(xiàn)表格內(nèi)容的隱藏和顯示。

$(document).ready(function(){
// 設(shè)置默認顯示行數(shù)為5
var show_rows = 5;
// 顯示內(nèi)容數(shù)量不足默認行數(shù)的全部內(nèi)容
var tr_num = $('table tbody tr').length;
if (tr_num < show_rows) {
show_rows = tr_num;
}
// 隱藏超出默認行數(shù)的內(nèi)容
$('table tbody tr:gt(' + (show_rows - 1) + ')').hide();
// 添加隱藏和顯示按鈕
$('table').after('<div class="show-more">顯示更多</div>');
// 點擊“顯示更多”按鈕
$('.show-more').click(function(){
// 獲取當前顯示的行數(shù)
var show_rows_num = $('table tbody tr:visible').length;
// 顯示更多行
$('table tbody tr:lt(' + (show_rows_num + show_rows) + '):gt(' + (show_rows_num - 1) + ')').show();
// 如果全部行都被顯示，則隱藏“顯示更多”按鈕
if ($('table tbody tr:visible').length == tr_num) {
$('.show-more').hide();
}
});
});

以上代碼會使表格內(nèi)容默認只顯示5行，超出行數(shù)的內(nèi)容被隱藏。點擊“顯示更多”按鈕可以顯示更多的行。最后，如果所有行都被顯示，則隱藏“顯示更多”按鈕。