javascript - 使用js的高级表格过滤器

我是新手，我需要一些有关js代码的帮助。

我想创建一个如https://www.w3schools.com/howto/howto_js_filter_table.asp的表格过滤器。

该脚本几乎完美。
在前三列中，过滤器可以完美地工作，我想要的是在搜索维度或代码时在后两列中，我只想显示匹配值，而不是所有产品值。

稍微解释一下表：

是一个5列的表格，其中前3列中的一些具有rowpan属性，因为它是同一产品，但具有不同的尺寸和代码。

如果我在尺寸输入中搜索值“ 70”，脚本将输出所有产品，在其中找到所有尺寸的值70，但是我只想显示所请求的值，并隐藏不符合要求的其他值（当前显示170和210值，但我只需要显示170值。）

我将代码的链接放在这里：https://jsfiddle.net/mitza_dragan/vg9e0fkr/3/

下面是我的js代码的一部分：

if(inp.id === "my" + cell.className) {
                        // Daca se gaseste valoarea din input in valoare din celula,
                        // seteaza seteaza true (s-a gasit macar o valoare in tot randul)
                        if(matchedCellText.indexOf(inp.value.toLowerCase()) > -1) {
                            matched = true;
                            // Daca s-a gasit macar un match, sari peste restul celulelor
                            // din randul actual
                            break;
                        }
                    }

要获取应用的完整视图，请点击上面的链接。
谢谢。

最佳答案

欢迎来到StackOverflow :)

感谢您分享一个有效的JS小提琴。我尝试了小提琴，并提出了解决方案，您可以检查此fiddle并让我知道它是否根据您的要求适用吗？

我将解释遵循的方法：

首先，由于最后两列有些不同，因此您必须分别对待它们。因此，如果后两列的搜索字段不为空，则我们不会跳出所有循环并隐藏整行，而是循环遍历所有单元格，然后隐藏miniRow或整个行。

我们可以通过以下代码行检查mydimensiune或mycod输入是否为空：

const isDimensiuneOrCodSearchInput = nonEmptySearchInputs.findIndex( (input) => {
    return (input.id == "mydimensiune" || input.id == "mycod")
});

如果isDimensiuneOrCodSearchInput为-1，则第4列和第5列搜索字段均为空，我们不必担心显示/隐藏任何miniRow。这是您的代码在前三列中运行良好的地方。

如果isDimensiuneOrCodSearchInput不为-1，则第4列或第5列搜索字段都不为空，我们需要根据单元格值匹配来检查是否应显示/隐藏miniRow。

在miniRows for循环内，引入了一个名为isHideMiniRow的新变量，该变量将确定是否应隐藏当前miniRow。

在cells for循环内，如果单元格值与输入值不匹配，则添加一个if块

if( cell.className == "dimensiune" || cell.className == "cod" ) {
    isHideMiniRow = true;
}

该块将isHideMiniRow设置为true，并在miniRow for循环中检查此变量，如果没有匹配的搜索字段，则隐藏miniRow。

另外，当按下退格键时，我们将不得不再次显示miniRows，因此添加了以下代码行：

const tableRows = document.querySelectorAll("tbody.table-row>tr");

tableRows.forEach(tableRow => tableRow.style.display = "table-row");

我已经尽力描述了对代码所做的更改。如果您想进一步了解上述方法，请告诉我。