隨著大量的數據和資訊在網頁上展現，滾動條和分頁已無法滿足我們的需求。因此，我們需要一些更好的方法來展示和隱藏資料。本文將介紹如何使用 jQuery 動態設定 tr 的顯示與隱藏，直接在表格中展示或隱藏資料。
一、清空表格
在動態設定表格的過程中，最好先清空表格。使用下列程式碼可以清空表格：
$("#myTable tbody tr").remove();
其中，#myTable 是你要操作的表格 ID，tbody 表示表格的主體，tr 為表格行。
二、顯示所有行
在表格中顯示所有行可以使用以下程式碼：
$("#myTable tbody tr").show();
這樣，所有表格的行將會被顯示出來。
三、隱藏所有行
在表格中隱藏所有行可以使用以下程式碼：
$("#myTable tbody tr").hide();
這將隱藏所有表格行。
四、依照條件顯示行
使用以下程式碼可以依照條件顯示行：
$("#myTable tbody tr").filter(function () { return $(this).text().indexOf("条件") !== -1; }).show();
其中，條件可依你的需求修改。這種方法可以根據特定條件，例如文字內容、類別或其他屬性來顯示行。
五、依照條件隱藏行
使用以下程式碼可以依照條件隱藏行：
$("#myTable tbody tr").filter(function () { return $(this).text().indexOf("条件") !== -1; }).hide();
這將根據指定條件隱藏行。
六、搜尋行
使用以下jQuery 程式碼可以搜尋表格行：
$("#myTable tbody tr").each(function () { var rowText = $(this).text().toLowerCase(); $('input[type="text"]').keyup(function () { if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) { $(this).closest("tr").show(); } else { $(this).closest("tr").hide(); } }); });
這段程式碼先遍歷所有的表格行，在輸入方塊中輸入文字後進行搜尋.如果文字方塊沒有內容，顯示所有行；如果找到符合項，僅顯示符合條件的行；否則，隱藏其餘所有行。
七、總結
使用 jQuery，動態設定表格行的顯示和隱藏非常容易。本文介紹如何清空表格、顯示或隱藏所有行、按條件顯示或隱藏行，以及如何搜尋表格行。這些技巧可以讓你更好地展示數據以及提高用戶體驗。
以上是jquery動態設定tr顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
