用jQuery設定隱藏大型列表

2019-12-11 16:40:04

Jquery是一個前端指令碼庫，使用這個外掛庫，可以方便我們處理前端邏輯。下面我們就來看一下使用jQuery是怎樣設定隱藏大型列表的。

在html裡，我們新增一個按鈕，用來觸發列表的顯示和隱藏。

再加上一個有很多資料的table，代表一個大型的列表。

使用jquery，我們可以很簡單就能實現列表的顯示和隱藏。只要呼叫列表的show方法就是顯示，hide方法就是隱藏了，$("#tb_list").show();

程式碼如圖，程式碼的其他部分，是用來判斷點選按鈕後，是顯示，還是隱藏列表的，主要是通過判斷table是否有h這個樣式來實現。

執行頁面，可以看到現在頁面上很一個很多資料的列表表格。如果要隱藏這個表格，我們可以點選按鈕。

點選後，我們可以看到，整個列表已經不見，隱藏起來了。再點選按鈕，會顯示回來。

如果你不想隱藏整個列表資料，而是留下幾行資料，我們可以修改一下程式碼，修改的部分主要是對表格的行進行顯示或隱藏，而不是整個表格。

先用jquery找到tr，這是一個陣列，除了前面四行資料，其他行的都呼叫hide方法隱藏，這樣就行了。

再次執行頁面，現在頁面顯示很多行資料的，點選一下按鈕。

點選後，現在列表資料除了前面四行，其他的都隱藏起來了，再次點選按鈕，會把所有的資料都顯示回來。