随着大量的数据和信息在网页上展现，滚动条和分页已无法满足我们的需求。因此，我们需要一些更好的方法来展示和隐藏数据。本文将介绍如何使用 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中文网其他相关文章！
