- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
实际上,我正在尝试创建特定的每列搜索。在这里,我可以使用数据类型管理第一列搜索,但使用此数据类型我无法处理其他列搜索。对于这些情况,不使用数据类型我可以管理单独的列搜索吗?
过程将是:如果我选择 = 运算符并在列中键入任何输入值,然后在搜索之后,输入值将变成与相似值匹配的一行或多行。同样,如果我选择 < 运算符和此列,如果我选择 > 运算符和此列,则小于输入值的任何输入值都将获得 如果我选择 <= 运算符和此列,则任何大于输入值的输入值将获得如果我选择 >= 运算符并且此列输入值将获得大于或等于输入值,则小于或等于输入值的任何输入值将获得。
如何解决这个问题?
const $available_qty = $("#available_quantity");
const $regular_price = $("#regular_price");
const $base_price = $("#base_price");
const $avl_table = $available_qty.closest("table");
const $rp_table = $regular_price.closest("table");
const $bp_table = $base_price.closest("table");
const $aggregate_value = $("#aggregate_condition");
const aggrFn = {
"=": (a,b) => a == b,
"<": (a,b) => a < b,
">": (a,b) => a > b,
"<=": (a,b) => a <= b,
">=": (a,b) => a >= b,
};
$('button.avl').click(function(){
const ag = $aggregate_value.val();
const av = $available_qty.val().trim();
const $rowsQty = $avl_table.find("[data-qty]")
$rowsQty.removeClass("u-none");
if (av === "") return;
$rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.qty, +av)).addClass("u-none");
})
$('button.rp').click(function(){
const ag = $aggregate_value.val();
const rp = $regular_price.val().trim();
const $rowsQty = $rp_table.find("[data-qty]")
$rowsQty.removeClass("u-none");
if (rp === "") return;
$rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.rp, +rp)).addClass("u-none");
})
$('button.bp').click(function(){
const ag = $aggregate_value.val();
const bp = $base_price.val().trim();
const $rowsQty = $bp_table.find("[data-qty]")
$rowsQty.removeClass("u-none");
if (bp === "") return;
$rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.bp, +bp)).addClass("u-none");
})
table {
width: 100%;
border-collapse: collapse;
}
table thead th {
padding: 15px;
}
table tbody tr td{
padding: 10px;
text-align: center;
}
.text-center{
text-align: center;
}
.header-name{
display: flex;
justify-content: center;
align-items: center;
}
.u-none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<thead>
<th class="text-center">
Available Quantity
<div class="header-name">
<div>
<select id="aggregate_condition">
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
</div>
<div>
<input type="text" id="available_quantity">
</div>
<div>
<button class="avl" type="submit">Apply</button>
</div>
</div>
</th>
<th class="text-center">
Regular Price
<div class="header-name">
<div>
<select id="aggregate_condition">
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
</div>
<div>
<input type="text" id="regular_price">
</div>
<div>
<button class="rp" type="submit">Apply</button>
</div>
</div>
</th>
<th class="text-center">
Base Price
<div class="header-name">
<div>
<select id="aggregate_condition">
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
</div>
<div>
<input type="text" id="base_price">
</div>
<div>
<button class="bp" type="submit">Apply</button>
</div>
</div>
</th>
</thead>
<tbody>
<tr data-qty="4">
<td>4</td>
<td>10</td>
<td>12</td>
</tr>
<tr data-qty="9">
<td>9</td>
<td>12</td>
<td>11</td>
</tr>
<tr data-qty="1">
<td>1</td>
<td>14</td>
<td>12</td>
</tr>
<tr data-qty="0">
<td>0</td>
<td>8</td>
<td>10</td>
</tr>
<tr data-qty="6">
<td>6</td>
<td>14</td>
<td>18</td>
</tr>
<tr data-qty="1">
<td>1</td>
<td>11</td>
<td>22</td>
</tr>
<tr data-qty="6">
<td>6</td>
<td>10</td>
<td>8</td>
</tr>
</tbody>
</table>
最佳答案
切换类的 bool 逻辑"u-none"
(隐藏一行)与 this already provided answer 非常相似,但您需要将代码修改为:
filterColumns( $someTableTarget )
接受 jQuery 包装的 HTMLTableElement 作为参数作为目标。colFilters
(过滤列),{agg:<select value>, val:<input value>}
"tbody tr"
及其 td
与列索引匹配的元素(colFilters
的键)切换 "u-none"
类取决于 shouldHide
由以下推导的 bool 值使用 Array.prototype.some()在 Object.entries() 上的 colFilters
以下示例适用于任意数量的 <table>
页面上的元素 - 如果某些 TH 没有过滤器输入:
const aggrFn = {
"=": (a, b) => a == b,
"<": (a, b) => a < b,
">": (a, b) => a > b,
"<=": (a, b) => a <= b,
">=": (a, b) => a >= b,
};
function filterColumns($table) {
const colFilters = {};
$table.find("thead .filter").each(function() {
colFilters[$(this).index()] = {
agg: $(this).find("select").val(),
val: $(this).find("input").val(),
}
});
$table.find("tbody tr").each(function() {
const $tr = $(this);
const shouldHide = Object.entries(colFilters).some(([k, v]) => {
const tdVal = $tr.find(`td:eq(${k})`).text();
return v.val === "" ? false : !aggrFn[v.agg](parseFloat(tdVal), parseFloat(v.val));
});
$tr.toggleClass("u-none", shouldHide);
});
}
$(".filter").on("input", ":input", function(ev) {
filterColumns($(this).closest("table"));
});
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
}
.filter>div {
display: flex;
justify-content: center;
}
.filter input {
width: 6em;
}
.u-none {
display: none;
}
<table>
<thead>
<th class="filter">
Available Quantity
<div>
<select>
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
<input type="number">
</div>
</th>
<th class="filter">
Regular Price
<div>
<select>
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
<input type="number">
</div>
</th>
<th class="filter">
Base Price
<div>
<select>
<option value="=">=</option>
<option value="<"><</option>
<option value=">">></option>
<option value="<=">≤</option>
<option value=">=">≥</option>
</select>
<input type="number">
</div>
</th>
</thead>
<tbody>
<tr><td>4</td><td>10</td><td>12</td></tr>
<tr><td>9</td><td>12</td><td>11</td></tr>
<tr><td>1</td><td>14</td><td>12</td></tr>
<tr><td>0</td><td>8</td><td>10</td></tr>
<tr><td>6</td><td>14</td><td>18</td></tr>
<tr><td>1</td><td>11</td><td>22</td></tr>
<tr><td>6</td><td>10</td><td>8</td></tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
关于javascript - 具有多个过滤器的过滤器表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66419395/
我有一个对象数组,我想在键传入“filter”过滤器时提取值。下面是我尝试过的 Controller 代码片段,但我得到的响应类型未定义。请帮我找出哪里出错了。 var states = [{"HI
如果任何 J2EE 应用程序直接访问 servlet,然后 servlet 将相同的请求转发到某个 .jsp 页面。 request.getRequestDispatcher("Login.jsp")
我有一个带有图像缩略图的表单,可以通过复选框进行选择以进行下载。我想要一个包含 jQuery 中图像的数组,用于 Ajax 调用。 2个问题: - 表格顶部有一个复选框,用于切换我想要从映射中排除的所
我必须从服务器转储数据库,将 .sql 传输到另一台服务器,然后运行以下脚本以使用此语法删除某些行: DELETE wp_posts FROM wp_posts INNER JOIN wp_postm
我想从目录中过滤掉特定类型的文件,但收到错误“ token 语法错误,删除这些 token ”: File dir = new File("c:/etc/etc"); File[] f
几乎所有的 Web 应用程序都依赖外部的输入。这些数据通常来自用户或其他应用程序(比如 web 服务)。通过使用过滤器,您能够确保应用程序获得正确的输入类型。 您应该始终对外部数据进行过滤! 输
我正在开发一个由 OData 服务提供支持的搜索功能。它将返回一个或一列标题对象作为结果。我们需要搜索的许多字段不在标题对象中。它们仅在子对象(导航属性)中。能够针对子字段执行 OData 搜索并仍然
假设我有以下模型,它有一个方法 variants(): class Example(models.Model): text = models.CharField(max_length=255)
我有一个默认的列表列表,但我基本上想这样做: myDefaultDict = filter(lambda k: len(k)>1, myDefaultDict) 除了它似乎只适用于列表。我能做什么?
我正在使用 django-filter 来输出我的模型的过滤结果。那里没有问题。下一步是添加一个分页器……尽管现在已经苦苦挣扎了好几天。 views.py: def funds_overview(re
我正在做一个概念证明,我正在试验一种奇怪的行为。 我有一个按日期字段按范围分区的表,如果我设置固定日期或由 SYSDATE 创建的日期,查询的成本会发生很大变化。 这些是解释计划: SQL> SELE
如果一个或另一个值匹配,是否可以制作一个过滤器,例如一个中性的 PropertyFilter(并传递给链中的下一个过滤器)?就像是: value1 val
我是 VBA 初学者,正在尝试根据单元格值过滤数据,经过一番谷歌搜索后,我编写了一个有效的代码 Sub FilterDepartment_Sales() Sheet6.Activate
假设我在 excel 数据透视表中有两个过滤器。 两者最初都会显示筛选列的选定范围内的所有值。 当我仅在过滤器 1 中选择几个值时,过滤器 2 仍会继续显示基础数据中所选范围内特定过滤器列中的所有值。
是否可以定义自定义 build-ins (名称不再适合)在 ftl? 由于语义前提,我不想让它成为一个函数,而是一个内置的。 最佳答案 这是不可能的,?语法是为内置函数保留的。 (顺便说一句,这意味着
我试图在 Edit | 之外添加一个链接通过插件删除wordpress管理员>用户>所有用户列表中的链接..这是我第一次尝试通过查看其他插件或搜索google来制作wordpress插件.. 我添加了
我正在尝试按照以下教程使用 django 过滤器进行分页,但该教程似乎缺少某些内容,而且我无法使用基于函数的 View 方法显示分页。 https://simpleisbetterthancomple
由于我是 Powershell 新手,因此寻求最佳实践方面的帮助, 我有一个 csv 文件,我想过滤掉 csv 中的每一行,除了包含“未安装”的行 然后,我想根据包含计算机列表的单独 csv 文件过滤
我正在尝试创建一个搜索查询,它会告诉我我作为审阅者添加到其中的打开更改,但我还没有提交最新补丁集的代码审查。这应该包括其他人已经评论过的更改,但我没有。 我能找到的最接近的是 is:reviewer
在我的 Web 应用程序中,我有 3 个主要部分 1. 客户 2. 供应商 3. 管理员 我正在使用 java session 过滤器来检查用户 session 并允许访问网站的特定部分。 因此客户只
我是一名优秀的程序员,十分优秀!