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

Question

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

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

脚本几乎完美。在前 3 列中，过滤器工作完美，我更想要的是在最后 2 列中，当您搜索维度或代码时，我只想显示匹配的值，而不是所有产品值。

稍微解释一下表格:

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

如果我在维度上搜索输入值“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;
                        }
                    }

要查看应用程序的完整 View ，请点击上面的链接。谢谢。

Answer 1

欢迎来到 StackOverflow :)

感谢分享有效的 JS fiddle。我试着研究 fiddle 并想出了一个解决方案，你能检查一下这个 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 block

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

这个 block 将 isHideMiniRow 设置为 true 并且在 miniRow for 循环中我们检查这个变量并隐藏 miniRow 如果没有搜索字段匹配。

此外，我们必须在按下退格键时再次显示 miniRows，因此添加了以下代码行来执行此操作:

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

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

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