Question

使用 js 过滤表格的最简单方法

2014-04-26

102

javascript wordpress html

我有一个工作网站，我尝试过类似这样的方法：

$(".camera").parent().hide(); 
$(".treicamere").parent().hide();

只显示有 2 个房间的公寓。我知道这不是最好的方法，所以我想知道是否有更好的方法来对它们进行排序。网站是用 Wordpress 制作的，这里有一个链接。您可以检查元素以检查格式：

http://www.sudpark.ro/apartamente/disponibilitate/

Answer 1

这会很麻烦。你准备好了吗？:)

首先，为每个 p （用作按钮的按钮）赋予相同的类，例如 p_camera 。然后为它们添加自定义属性以获取它们的索引，例如： data-index="1" 。之后，您就设置好了。这是用于过滤的 click 函数。

$("p.p_camera").on("click", function(){
   $("#my-table tr").not(".cf").not(":has(td[colspan=10])").hide()
                    .find("td:eq(1):contains('"+ $(this).attr("data-index") +"')").parent().show();
});

FIDDLE

如果您有不明白的地方，我可以解释一切

Answer 2

由于这是一个 Wordpress 网站，您可以考虑使用一个可以做到这一点的表格插件，例如 Wordpress 的 Tabulizer，它允许您根据列值过滤表格行。您可以在特定列上添加搜索过滤器，使用不同类型的搜索过滤器（输入框、选择框）和搜索方法（包含、精确匹配、以...开头、数字范围等）。以下是一些想法：

为房间数量创建一个列过滤器。访问者将从下拉列表中选择所需的房间数量（Nr.Camere）。阳台数量也一样。
为平方米创建一个列过滤器。访问者可以找到所有面积大于 50 平方米、小于 100 平方米或介于 50 和 100 平方米之间的公寓。

您还可以将过滤与排序控件相结合。这是一个演示 http://www.tabulizer.com/index.php/support-menu/tabulizer-tips/63-sort-second-row