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

$(document).ready(function(){
// 設(shè)置默認(rèn)顯示行數(shù)為5
var show_rows = 5;
// 顯示內(nèi)容數(shù)量不足默認(rèn)行數(shù)的全部?jī)?nèi)容
var tr_num = $('table tbody tr').length;
if (tr_num < show_rows) {
show_rows = tr_num;
}
// 隱藏超出默認(rèn)行數(shù)的內(nèi)容
$('table tbody tr:gt(' + (show_rows - 1) + ')').hide();
// 添加隱藏和顯示按鈕
$('table').after('<div class="show-more">顯示更多</div>');
// 點(diǎn)擊“顯示更多”按鈕
$('.show-more').click(function(){
// 獲取當(dāng)前顯示的行數(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();
}
});
});

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