Question

我是新手，我需要一些有关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;
                        }
                    }

有关应用程序的完整视图，请点击上面的链接。谢谢。

Answer 1

欢迎使用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");

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

使用js的高级表格过滤

1 个答案: