具有多个过滤器的过滤器表

Question

实际上，我正在尝试创建一个特定的每列搜索。 在这里，我可以使用数据类型管理第一列搜索，但使用此数据类型我无法处理其他列搜索。 对于这些情况，不使用数据类型是否可以管理单个列搜索？

程序将是：如果我 select = 运算符并键入列任何输入值，然后在搜索后，输入值将得到与相似值匹配的一行或多行。 同样，如果我 select < 运算符和此列任何输入值将得到小于输入值如果我 select > 运算符和此列任何输入值将获得大于输入值如果我 Z99938282F040718CF42ZEF=E 和此列如果 I select >= 运算符和此列输入值大于或等于输入值将获得任何小于或等于输入值的输入值。

如何解决这个问题呢？

 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="<">&lt;</option> <option value=">">&gt;</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="<">&lt;</option> <option value=">">&gt;</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="<">&lt;</option> <option value=">">&gt;</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>

Answer 1

过滤表行 - 多个过滤器

boolean 逻辑来切换 class "u-none" （隐藏一行）与这个已经提供的答案非常相似，但是您需要将代码修改为：

• 创建一个 function filterColumns( $someTableTarget ) ，它接受 jQuery 包装的 HTMLTableElement 作为参数作为目标。
• 创建一个 Object colFilters （过滤列），
  其中 object键是列索引
  并且值为object {agg:<select value>, val:<input value>}
• Loop every "tbody tr" and its td elements that match the column index ( key of colFilters ) toggle the "u-none" class depending on shouldHide boolean which is deduced by using Array.prototype.some() on the 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="<">&lt;</option> <option value=">">&gt;</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="<">&lt;</option> <option value=">">&gt;</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="<">&lt;</option> <option value=">">&gt;</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>